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">×</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 :
 | 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 .