in English

Modal

Salelá plugin modal ya JavaScript ya Bootstrap mpo na kobakisa ba dialogues na site na yo mpo na ba lightbox, mayebisi ya mosaleli, to makambo oyo obongisi mpenza.

Ndenge oyo esalaka

Yambo ya kobanda na composant modal ya Bootstrap, sala makasi otanga oyo elandi lokola ba options na biso ya menu ebongwani kala mingi te.

Ba modales etongami na HTML, CSS, mpe JavaScript. Bazali positionné likolo ya nionso mosusu na mokanda mpe kolongola défilement na <body>mpo contenus modal défilement na esika.
Kofina na “fon d’écran” modal ekokanga automatiquement modal.
Bootstrap esimbaka kaka fenêtre modale moko na mbala moko. Ba modals encastrés esungami te lokola tondimi ete ezali ba expériences ya ba usagers ya mabe.
Modals use position: fixed, oyo ekoki ntango mosusu kozala mwa particulier na oyo etali rendu na yango. Soki likoki ezali, tia HTML na yo ya modal na esika ya nivo ya likolo mpo na koboya bopanzani oyo ekoki kobima na biloko mosusu. Okozala mbala mosusu kokutana na makambo ntango ozali kosala nesting a na .modalkati ya élément mosusu fixe.
Encore une fois, en raison ya position: fixed, ezali na mua ba caveats na kosalela ba modals na ba appareils mobiles. Tala ba docs na biso ya soutien ya navigateur pona ba détails.
Na tina ya ndenge HTML5 elimbolaka sémantique na yango, attribut autofocusHTML ezali na effet moko te na ba modal ya Bootstrap. Mpo na kozwa effet moko, salelá mwa JavaScript oyo obongisi:

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

Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Koba kotanga mpo na ba démos mpe malako ya kosalela.

Bandakisa

En bas ezali exemple modal statiqueposition (elingi koloba ya yango mpe displaybasili ko overridé). Ezali na kati ya motó ya modale, nzoto ya modal (esengeli mpo na padding), mpe motó ya nse ya modal (ekoki kozala na bolingi). Tosengi ete otia ba têtes modales na ba actions ya démission soki likoki ezali, to opesa action mosusu ya démission ya polele.

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

Démonstration en direct

Toggle démonstration modal ya mosala na ko cliquer bouton oyo ezali awa na se. Ekokita mpe ekosila na kati longwa na likoló ya lokasa.

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

Fond d'écran statique

Tango fond d'écran etie na statique, modal ekokangama te tango ozali ko cliquer libanda na yango. Finá na butɔ oyo ezali awa na nse mpo na komeka yango.

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

Kosala défilement ya makambo milai

Tango ba modal ekomi milayi mingi pona viewport to appareil ya mosaleli, ezo défiler indépendamment ya page yango moko. Meka démonstration oyo ezali awa na se po omona oyo tolingi koloba.