Modal nga

Usaren ti JavaScript modal plugin ti Bootstrap tapno manginayon kadagiti dialogo iti site-mo para kadagiti lightbox, pakaammo ti agar-aramat, wenno naan-anay a kostumbre a linaon.

No kasano ti panagandar dayta

Sakbay a mangrugi iti modal a paset ti Bootstrap, siguraduen a basaen dagiti sumaganad ta nabiit pay a nagbaliw dagiti pagpilianmi iti menu.

Dagiti modal ket naibangon babaen ti HTML, CSS, ken JavaScript. Dagitoy ket naiposision iti rabaw ti amin a dadduma pay iti dokumento ken ikkaten ti panag-scroll manipud iti <body>tapno ti modal a linaon ket ag-scroll ketdi.
Ti panangi-click iti modal a “backdrop” ket automatiko nga iserrana ti modal.
Ti Bootstrap ket mangsuporta laeng ti maysa a modal a tawa iti tunggal maysa a gundaway. Dagiti naisanglad a modal ket saan a nasuportaran a kas patienmi a dagitoy ket nakurapay a padas ti agar-aramat.
Dagiti modal ket agus-usar ti position: fixed, a mabalin a no dadduma ket bassit a partikular maipapan ti panagiparangna. No mabalin, ikabilmo ti modal nga HTML-mo iti kangatuan nga antas a posision tapno maliklikan ti mabalin a pannakasinga manipud kadagiti sabali nga elemento. Mabalin a makasabatka kadagiti isyu no ag-umok ti maysa iti .modaluneg ti sabali a naikeddeng nga elemento.
Maminsan manen, gapu iti position: fixed, adda sumagmamano a pakdaar iti panangusar kadagiti modal kadagiti mobile device. Kitaen dagiti dokumento ti suporta ti browsermi para kadagiti detalye.
Gapu ti no kasano a ti HTML5 ket mangikeddeng ti semantikana, ti autofocuskabileg ti HTML ket awan ti epektona kadagiti modal ti Bootstrap. Tapno magun-od ti isu met laeng nga epekto, agusarka iti sumagmamano a kostumbre a JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  $('#myInput').trigger('focus')
})

Ti epekto ti animasion daytoy a paset ket agpannuray iti prefers-reduced-motionpanagsaludsod ti media. Kitaen ti benneg ti naikkat a panaggunay ti dokumentasionmi ti pannakagun-od .

Itultuloymo ti agbasa para kadagiti demo ken pagannurotan ti panagusar.

Dagiti pagarigan

Iti baba ket ti estatiko a modal a pagarigan (kayatna a sawen ti its positionand displayhave been overridden). Nairaman ti modal nga ulo, modal a bagi (kasapulan para iti padding), ken modal footer (opsional). Kiddawenmi nga iramanmo dagiti modal nga ulo nga addaan kadagiti panagikkat a panagtignay no mabalin, wenno mangipaay ti sabali a nalawag a panagikkat a panagtignay.

<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>

Agbiag nga demo

I-toggle ti agtartrabaho a modal demo babaen ti panangi-klik iti buton iti baba. Ag-slide dayta nga agpababa ken agkupas manipud iti ngato ti panid.

<!-- 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>

Estatiko nga backdrop

No ti backdrop ket naikabil iti estatiko, ti modal ket saan nga agserra no ag-click iti ruar daytoy. I-click ti button iti baba tapno padasem dayta.

<!-- 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>

Panag-scroll iti atiddog a linaon

No dagiti modal ket agbalin nga atiddog unay para iti viewport wenno alikamen ti agar-aramat, ag-scrollda nga agwaywayas iti panid a mismo. Padasem ti demo iti baba tapno makitam no ania ti kayatmi a sawen.