Ultimele tutoriale de dezvoltare web
 

Bootstrap Modal Plugin

❮ Anterior Urmatorul capitol ❯

Modali Plugin

Modali plugin-ul este o / fereastră pop-up caseta de dialog care este afișată în partea de sus a paginii curente:

Sfat: Plugin - uri pot fi incluse în mod individual (folosind Bootstrap lui individuale "modal.js" fișier), sau dintr -o dată (folosind "bootstrap.js" sau "bootstrap.min.js" ).

Cum Pentru a crea un Modal

Următorul exemplu arată cum să creați un modal de bază:

Exemplu

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>
Încearcă - l singur »

exemplu explicat

"Trigger" parte:

Pentru a declanșa fereastra modal, trebuie să utilizați un buton sau un link.

Apoi , includ cele două data-* atribute:

  • data-toggle="modal" se deschide fereastra modal
  • data-target="#myModal" puncte la id - modal

"Modal" parte:

Părintele <div> de modal trebuie să aibă un ID care este aceeași ca valoarea data-target atribut utilizat pentru a declanșa modal ("myModal") .

.modal Clasa identifică conținutul <div> ca modal și aduce focalizarea la ea.

.fade clasa adaugă un efect de tranziție care se estompează modal și în afară. Eliminați această clasă, dacă nu doriți acest efect.

Atributul role="dialog" îmbunătățește accesibilitatea pentru persoanele care folosesc cititoare de ecran.

.modal-dialog clasa stabilește lățimea corespunzătoare și marja de modal.

"Modal content" parte:

<div> cu class="modal-content " stiluri modal (border, background-color, etc.) de (border, background-color, etc.) . În interiorul acestui <div> , adăugați modal de antet, corp, și un subsol.

.modal-header clasa este folosit pentru a defini stilul pentru antetul modal. <button> în interiorul antetul are o data-dismiss="modal" atribut care închide modal dacă faceți clic pe ea. Cele .close stiluri de clasă butonul de închidere, iar .modal-title stiluri de clasă antetul cu o linie de înălțime corespunzătoare.

.modal-body clasa este folosit pentru a defini stilul pentru corpul modal. Adăugați orice HTML aici de marcare; paragrafe, imagini, clipuri video, etc.

.modal-footer clasa este folosit pentru a defini stilul pentru subsolul modal. Rețineți că această zonă este corect aliniat în mod implicit.

Modal Dimensiune

Modificarea dimensiunii modal prin adăugarea .modal-sm clasa pentru modalelor mici sau .modal-lg clasa pentru modalelor mari.

Adăugați clasa de mărime la <div> elementul cu clasa .modal-dialog :

mici Modal

<div class="modal-dialog modal-sm">
Încearcă - l singur »

mare Modal

<div class="modal-dialog modal-lg">
Încearcă - l singur »

În mod implicit, modals sunt de marime medie.

Finalizarea Bootstrap Modal de referință

Pentru o referință completă a tuturor opțiunilor modale, metode și evenimente, du - te la nostru Bootstrap JS Modal de referință .


❮ Anterior Urmatorul capitol ❯