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')
})

Pe efecto animación rehegua ko componente rehegua odepende pe prefers-reduced-motionconsulta medio rehegua rehe. Ehecha pe sección movimiento reducido ore kuatia accesibilidad rehegua .

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 vore 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">
  <div class="modal-dialog">
    <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" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <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>

Telón de fondo estático rehegua

Oñemohenda jave telón de fondo estático-pe, modal noñembotymoꞌãi ojepyso jave okápe. Emboguejy pe botón oĩva iguýpe reñehaʼã hag̃ua.

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

<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">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">Understood</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.