Source

Modal rehegua

Eipuru Bootstrap JavaScript modal plugin emoĩ hag̃ua ñe’ẽñemi nde tenda’ípe tesape’arã, puruhára momarandurã térã contenido personalizado completo-pe g̃uarã.

Mba’éichapa omba’apo

Eñepyrũ mboyve Bootstrap componente modal reheve, emoñe’ẽ katuete ko’ãva ñande menú opción nda’aréi iñambuégui.

  • Umi modalidad oñemopuꞌa HTML, CSS ha JavaScript rupive. Oñemohenda hikuái opa mbaꞌe ambue kuatiaroguépe ári ha oipeꞌa desplazamiento-gui <body>ikatu hag̃uáicha contenido modal ojedesplaza hendaguépe.
  • Ojepysóramo “telón de fondo” modal rehe, oñembotýta ijeheguiete pe modal.
  • Bootstrap oipytyvõ peteĩ ventána modal añoite peteĩ jeýpe. Umi modal anidado ndojeguerohorýi rogueroviaháicha ha’eha puruhára reko vai.
  • Modal oipuru position: fixed, ikatúva sapy’ánte ha’e peteĩ mba’e particular’imi irrenderización rehegua. Ikatu jave, emoĩ ne HTML modal peteĩ tenda yvateguápe ani hag̃ua ojejoko ambue elemento-kuéragui. Oiméne rejuhúta mba’e’oka remoĩ jave peteĩ .modalambue elemento fijo ryepýpe.
  • Peteî jey, debido a position: fixed, oî algunas advertencias oiporúvo modal umi dispositivo móvil-pe. Ehecha ore kuatiañe’ẽ pytyvõrã kundahára rehegua reikuaa hag̃ua mba’ekuaarã.
  • Mbaꞌeichaitépa HTML5 omboheko iñeꞌepykuaa, HTML atributo ndoguerekói mbaꞌeveichagua mbaꞌekuaarã umiautofocus modal Bootstrap-pe. Ojehupyty hag̃ua peteĩchagua efecto, eipuru peteĩ JavaScript jeporupyre:
$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Emoñe’ẽ meme umi demostración ha jepururã ñe’ẽmondo rehegua.

Tembiecharã

Iguýpe oĩ peteĩ techapyrã modal estáticoposition (he’iséva i ha displayoñemboyke hague). Oike ipype iñakãrapuꞌa modal, retepy modal (oñeikotevẽva padding) ha ipypegua modal (opcional). Rojerure remoĩ hag̃ua umi iñakãrapu’ã modal orekóva tembiapo ñemboyke ikatu jave, térã eme’ẽ ambue tembiapo ñemboyke hesakãva.

<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Demostración en vivo rehegua

Embohasa peteĩ demostración modal omba’apóva eitykuévo pe botón iguýpe. Oguejýta ha oñedesvanece vaʼerã pe páhina yvate guive.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Ojedesplazávo contenido ipukúva

Umi modal ipukuetereíramo puruhára jehechaukaha térã tembipururãme g̃uarã, ojedesplaza ijeheguiete pe páhinagui voi. Eñeha’ã pe demostración oĩva ko’ápe rehecha hag̃ua mba’épa ja’ese.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Oñecentra verticalmente

Oñembojoapy .modal-dialog-centereda .modal-dialogoñecentra hagua verticalmente pe modal.

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Tembipururã ñe’ẽmondo ha popovers

Umi tembipuru’i ñe’ẽmondo ha umi popover ikatu oñemoĩ modal ryepýpe oñeikotevẽháicha. Oñembotývo umi modal, oñemboyke avei ijeheguiete oimeraẽva tembipururã ñe’ẽmondo ha umi popover oĩva hyepýpe.

<div class="modal-body">
  <h5>Popover in a modal</h5>
  <p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
  <hr>
  <h5>Tooltips in a modal</h5>
  <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>

Oipurúvo pe cuadrícula

Eipuru sistema cuadrícula Bootstrap peteĩ modal ryepýpe emoĩvo anidado .container-fluidryepýpe .modal-body. Upéi, eipuru umi clase sistema red normal rehegua rejapoháicha ambue hendápe.

<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">.col-md-4</div>
      <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-3 ml-auto">.col-md-3 .ml-auto</div>
      <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
    </div>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-8 col-sm-6">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-4 col-sm-6">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Contenido modal iñambuéva

¿Reguerekópa peteĩ aty umi botón opavave ombohapéva peteĩchagua modal orekóva contenido iñambue’imiva? Eipuru event.relatedTargetha HTML data-*atributo (ikatu jQuery rupive ) emoambue hag̃ua modal mbaꞌekuaarã ojesarekóva mbaꞌe botón rehepa ojepyso.

Iguýpe oĩ peteĩ demostración en vivo hapykuéri techapyrã HTML ha JavaScript. Ojeikuaave hag̃ua, emoñe’ẽ umi docs eventos modal rehegua umi detalle rehegua relatedTarget.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) // Button that triggered the modal
  var recipient = button.data('whatever') // Extract info from data-* attributes
  // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
  var modal = $(this)
  modal.find('.modal-title').text('New message to ' + recipient)
  modal.find('.modal-body input').val(recipient)
})

Ojepe’a pe animación

Umi modal ojehechaukáva simplemente oñedesvanece rangue ojehecha hag̃ua, eipe’a pe .fadeclase nde marcado modal-gui.

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
  ...
</div>

Alturas dinámicas rehegua

Peteĩ modal yvatekuépe oñemoambuéramo ojepeꞌa aja, ehenóivaꞌerã $('#myModal').modal('handleUpdate')emohenda jey hag̃ua modal ñemohenda ojehecharamo peteĩ barra de desplazamiento.

Accesibilidad rehegua

Ejesareko katuete emoĩ role="dialog"ha aria-labelledby="...", referencia título modal rehe, .modal, ha role="document"pe .modal-dialogijehegui. Avei, ikatu eme’ẽ peteĩ ñemombe’u ne ñe’ẽñemi modal rehegua aria-describedbyon ndive .modal.

Oñemoinge umi video YouTube-pegua

Oñemoinge hag̃ua YouTube videokuéra modal-pe oikotevẽ JavaScript adicional ndaha’éiva Bootstrap-pe ojejoko hag̃ua ijeheguiete ñembopu ha hetave mba’e. Ehecha ko kuatiañe’ẽ oipytyvõva Stack Overflow rehegua reikuaave hag̃ua.

Umi tamaño opcional rehegua

Umi modal oguereko mokõi tuichakue opcional, ojeguerekóva clase modificador rupive oñemoĩ hag̃ua peteĩ .modal-dialog. Koꞌã tuichakue oike peteĩteĩva punto de ruptura-pe ani hag̃ua ojejapo barra de desplazamiento horizontal umi jehechaukaha ijyvykuꞌivévape.

<!-- Large modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>

<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-sm">Small modal</button>

<div class="modal fade bd-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Jeporu rehegua

Pe plugin modal ombohasa ne mba’ekuaarã kañymby ojejeruréramo, umi atributo dato rehegua térã JavaScript rupive. Avei omoĩve .modal-openpe <body>to override desplazamiento comportamiento por defecto ha omoheñói peteĩ .modal-backdropomeꞌe hag̃ua peteĩ área clic rehegua oñemboyke hag̃ua umi modal ojehechaukáva ojepyso jave modal okaháre.

Umi atributo de datos rupive

Emombaꞌapo peteĩ modal ehaiꞌeỹre JavaScript. Oñemohenda data-toggle="modal"peteĩ elemento controlador rehe, peteĩ botón-icha, peteĩ data-target="#foo"térã href="#foo"ndive ojepytaso hag̃ua peteĩ modal específico ojere hag̃ua.

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

JavaScript rupive

Ehenói peteĩ modal orekóva id myModalpeteĩ línea JavaScript reheve:

$('#myModal').modal(options)

Opciones rehegua

Umi opción ikatu oñembohasa atributo de datos térã JavaScript rupive. Umi atributo dato rehegua, emoĩ opción réra data-, -peguáicha data-backdrop="".

Téra Hesegua Upevakuére Techaukaha
telón de fondo rehegua boolean térã pe vore'static' teete Oike peteĩ elemento modal-telón de fondo rehegua. Ikatu avei, emombeꞌu staticpeteĩ telón de fondo-pe g̃uarã nombotýiva modal clic-pe.
teclado rehegua booleano rehegua teete Omboty modal ojepysóramo tecla escape
jesareko renda booleano rehegua teete Omoĩ enfoque modal rehe oñepyrũ jave.
hechauka booleano rehegua teete Ohechauka modal oñepyrũ jave.

Método-kuéra rehegua

Método ha transición asíncrono rehegua

Opaite API rembiaporã haꞌehína asíncrono ha oñepyrũ peteĩ jehasapa . Ojevy hikuái ohenóivape oñepyrũvove pe transición ha katu opa mboyve . Avei, oñemboykéta peteĩ ñehenói método rehegua peteĩ componente oñembohasáva rehe .

Ehecha ore kuatiañe’ẽ JavaScript rehegua reikuaave hag̃ua.

.modal(options)

Omomba’apo ne contenido modal ramo. Omoneĩ peteĩ opción opcional object.

$('#myModal').modal({
  keyboard: false
})

.modal('toggle')

Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden (i.e. before the shown.bs.modal or hidden.bs.modal event occurs).

$('#myModal').modal('toggle')

.modal('show')

Manually opens a modal. Returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

$('#myModal').modal('show')

.modal('hide')

Manually hides a modal. Returns to the caller before the modal has actually been hidden (i.e. before the hidden.bs.modal event occurs).

$('#myModal').modal('hide')

.modal('handleUpdate')

Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).

$('#myModal').modal('handleUpdate')

.modal('dispose')

Destroys an element’s modal.

Events

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event Type Techaukaha
ohechauka.bs.modal Ko mbaꞌe ojehúva oñembopu pyaꞌe oñehenói jave showmétodo instancia rehegua. Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko relatedTargetpe mbaꞌe ojehúva mbaꞌeichaitépa.
ojehechauka.bs.modal Ko mbaꞌe ojehúva oñembogue ojejapo rire modal ojehecha hag̃ua puruhárape (ohaꞌarõta oñembotývo umi CSS jehasaha). Ojejapóramo peteĩ jekutu rupive, pe elemento ojepysóva ojeguereko relatedTargetpe mbaꞌe ojehúva mbaꞌeichaitépa.
omokañy.bs.modal Ko mbaꞌe ojehúva oñembogue pyaꞌe oñehenói rire pe hidemétodo instancia rehegua.
kañymby.bs.modal Ko mbaꞌe ojehúva oñembogue modal oñemokañypa rire puruháragui (ohaꞌarõta CSS jehaipyre oñembotývo). 
$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})