Plugin modale Bootstrap
Il plugin modale
Il plugin modale è una finestra di dialogo/finestra popup che viene visualizzata nella parte superiore della pagina corrente:
Suggerimento: i plug-in possono essere inclusi singolarmente (usando il singolo file "modal.js" di Bootstrap) o tutti insieme (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>
Esempio spiegato
La parte "Trigger":
Per attivare la finestra modale, è necessario utilizzare un pulsante o un collegamento.
Quindi includi i due attributi data-*:
data-toggle="modal"apre la finestra modaledata-target="#myModal"punta all'id del modale
La parte "Modale":
Il genitore <div>del modale deve avere un ID uguale al valore dell'attributo data-target utilizzato per attivare il modale ("myModal").
La .modalclasse identifica il contenuto di <div>come modale e focalizza l'attenzione su di esso.
La .fadeclasse aggiunge un effetto di transizione che sfuma il modale in entrata e in uscita. Rimuovere questa classe se non si desidera questo effetto.
L'attributo role="dialog"migliora l'accessibilità per le persone che utilizzano lettori di schermo.
La .modal-dialogclasse imposta la larghezza e il margine appropriati del modale.
La parte "Contenuto modale":
Il <div>con class="modal-content" stilizza il modale (bordo, colore di sfondo, ecc.). All'interno di questo <div>, aggiungi l'intestazione, il corpo e il piè di pagina del modale.
La .modal-headerclasse viene utilizzata per definire lo stile per l'intestazione del modale. L' <button>interno dell'intestazione ha un data-dismiss="modal"attributo che chiude il modale se si fa clic su di esso. La .closeclasse stilizza il pulsante di chiusura e la .modal-titleclasse stilizza l'intestazione con un'altezza di linea adeguata.
La .modal-bodyclasse viene utilizzata per definire lo stile per il corpo del modale. Aggiungi qualsiasi markup HTML qui; paragrafi, immagini, video, ecc.
La .modal-footerclasse viene utilizzata per definire lo stile per il piè di pagina del modale. Si noti che quest'area è allineata a destra per impostazione predefinita.
Dimensione modale
Modificare la dimensione del modale aggiungendo la .modal-sm
classe per i modali piccoli o la .modal-lgclasse per i modali grandi.
Aggiungi la classe size <div>all'elemento con class .modal-dialog:
Modale piccolo
<div class="modal-dialog modal-sm">
Modale grande
<div class="modal-dialog modal-lg">
Per impostazione predefinita, le modali sono di dimensioni medie.
Riferimento modale completo di Bootstrap
Per un riferimento completo di tutte le opzioni modali, i metodi e gli eventi, vai al nostro Bootstrap JS Modal Reference .