Bootstrap 4 Modale
Bootstrap 4 Modale
Il componente Modale è una finestra di dialogo/finestra a comparsa visualizzata nella parte superiore della pagina corrente:
Come creare un modale
L'esempio seguente mostra come creare un modale di base:
Esempio
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary"
data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal
Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal
body..
</div>
<!-- Modal footer -->
<div
class="modal-footer">
<button
type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Aggiungi animazione
Usa la .fadeclasse per aggiungere un effetto di dissolvenza quando apri e chiudi il modale:
Esempio
<!-- Fading modal -->
<div class="modal fade"></div>
<!--
Modal without animation -->
<div class="modal"></div>
Dimensione modale
Modificare la dimensione del modale aggiungendo la .modal-sm
classe per i modali piccoli, la .modal-lgclasse per i modali grandi o .modal-xlper i modali extra large.
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">
Modale extra large
<div class="modal-dialog modal-xl">
Per impostazione predefinita, le modali sono di dimensioni "medie".
Modale centrato
Centra il modale verticalmente e orizzontalmente all'interno della pagina, con la .modal-dialog-centered
classe:
Esempio
<div class="modal-dialog modal-dialog-centered">
Scorrimento modale
Quando hai molti contenuti all'interno del modale, viene aggiunta una barra di scorrimento alla pagina. Guarda gli esempi seguenti per capirlo:
Esempio
<div class="modal-dialog">
Tuttavia, è possibile scorrere solo all'interno del modale, anziché nella pagina stessa, aggiungendo .modal-dialog-scrollablea .modal-dialog:
Esempio
<div class="modal-dialog modal-dialog-scrollable">
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 .