Gli ultimi tutorial di sviluppo web
 

Bootstrap Modal Plugin


Il plugin modale

Il plugin Modal è una finestra di dialogo / popup che viene visualizzato sulla parte superiore della pagina corrente:

Tip: I plugin possono essere inclusi singolarmente (utilizzando individuali di Bootstrap "modal.js" di file), o tutti in una volta (usando "bootstrap.js" o "bootstrap.min.js" ).


Come creare un modale

L'esempio seguente mostra come creare un modale di base:

Esempio

<!-- 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>
Prova tu stesso "

esempio spiegato

Il "Trigger" parte:

Per attivare la finestra modale, è necessario utilizzare un pulsante o un link.

Quindi includere i due data-* attributi:

  • data-toggle="modal" apre la finestra modale
  • data-target="#myModal" indica l'id del modal

Il "Modal" parte:

Il genitore <div> del modale deve avere un ID che è lo stesso del valore dell'attributo bersaglio utilizzato per attivare modale ("myModal") .

Il .modal classe identifica il contenuto del <div> come modale e porta in primo piano.

Il .fade classe aggiunge un effetto di transizione che sfuma modale dentro e fuori. Rimuovere questa classe se non si desidera che questo effetto.

L'attributo role="dialog" migliora l'accessibilità per le persone che utilizzano screen reader.

Il .modal-dialog di classe imposta la larghezza corretta e il margine della modale.

Il "contenuto modale" parte:

Il <div> con class="modal-content " stili modale (confine, background-color, ecc). All'interno di questo <div> , aggiungere del modal intestazione, corpo e piè di pagina.

Il .modal-header classe viene utilizzata per definire lo stile per l'intestazione della modale. Il <button> dentro l'intestazione ha un data-dismiss="modal" attributo che chiude la modale se si fa clic su di esso. I .close stili di classe il pulsante di chiusura, e le .modal-title stili di classe l'intestazione con una vera e propria line-height.

Il .modal-body classe viene utilizzata per definire lo stile del corpo del modale. Aggiungere qualsiasi codice HTML qui; paragrafi, immagini, video, ecc

Il .modal-footer classe viene utilizzata per definire lo stile per il piè di pagina del modale. Si noti che questa zona è allineato a destra per impostazione predefinita.


modale Size

Modificare le dimensioni del modal con l'aggiunta del .modal-sm classe per piccoli modali o .modal-lg classe per grandi modali.

Aggiungere la classe dimensionale al <div> elemento con classe .modal-dialog :

piccolo modale

<div class="modal-dialog modal-sm">
Prova tu stesso "

Grande modale

<div class="modal-dialog modal-lg">
Prova tu stesso "
Nota Per impostazione predefinita, modali sono di medie dimensioni.

Completare Bootstrap modale di riferimento

Per un riferimento completo di tutte le opzioni modali, metodi ed eventi, vai alla nostra Bootstrap JS modale di riferimento .