Bootstrap 5 Modale

Modale

Il componente Modal è una finestra di dialogo/pulsante a comparsa, visualizzata nella parte superiore della pagina corrente:

Come creare un modal

Esempio di come creare un modal di base:

Esempio

<!-- Bottone per aprire il modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Apri modal
</button>
<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Titolo del modal -->
      <div class="modal-header">
        <h4 class="modal-title">Intestazione del Modal</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <!-- Corpo del modal -->
      <div class="modal-body">
        Corpo del modal ..
      </div>
      <!-- Footer del modal -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Chiudi</button>
      </div>
    </div>
  </div>
</div>

Prova personalmente

aggiungi animazione

Per aggiungere l'animazione usa .fade Aggiungi la classe per aggiungere l'effetto di sfumatura durante l'apertura e la chiusura del modal:

Esempio

<!-- Modal sfumato -->
<div class="modal fade"></div>
<!-- Modal senza animazione -->
<div class="modal"></div>

Prova personalmente

Dimensione del Modal

aggiungendo alla modal piccola .modal-sm class (max-width 300px) per il modal grande .modal-lg class (max-width 800px) o aggiungi per il modal super grande .modal-xl per cambiare la dimensione del modal (max-width 1140 pixel). La larghezza massima predefinita è di 500 pixel.

Per favore aggiungi .modal-dialog Aggiungi insieme alle classi di dimensione <div> Elemento:

Modal Piccolo

<div class="modal-dialog modal-sm">

Prova personalmente

Modal Grande

<div class="modal-dialog modal-lg">

Prova personalmente

Modalità Modulo Extra Large

<div class="modal-dialog modal-xl">

Prova personalmente

Per impostazione predefinita, la dimensione del modulo è "medium" (max-width di 500px).

Modalità a schermo intero

Se desideri che il modulo copra l'intera larghezza e altezza della pagina, usa .modal-fullscreen Classe:

Esempio

<div class="modal-dialog modal-fullscreen">

Prova personalmente

Modalità a schermo intero responsive

Puoi anche usare .modal-fullscreen-*-* Classe che controlla quando il modulo dovrebbe essere visualizzato a schermo intero:

Classe Descrizione Esempio
.modal-fullscreen-sm-down Pieno schermo sotto i 576px Prova personalmente
.modal-fullscreen-md-down Pieno schermo sotto i 768px Prova personalmente
.modal-fullscreen-lg-down Pieno schermo sotto i 992px Prova personalmente
.modal-fullscreen-xl-down Pieno schermo sotto i 1200px Prova personalmente
.modal-fullscreen-xxl-down Pieno schermo sotto i 1400px Prova personalmente

Modulo centrato

Utilizzando .modal-dialog-centric Classe, centra verticalmente e orizzontalmente il modulo all'interno della pagina:

Esempio

<div class="modal-dialog modal-dialog-centered">

Prova personalmente

Modalità di scorrimento

Quando ci sono molte informazioni nel modulo, viene aggiunta una barra di scorrimento alla pagina. Guarda l'esempio seguente per capire:

Esempio

<div class="modal-dialog">

Prova personalmente

Ma, attraverso l'uso di .modal-dialog-scrollable Aggiungi a .modal-dialog Può essere scrollato solo all'interno del modulo, non nella pagina stessa:

Esempio

<div class="modal-dialog modal-dialog-scrollable">

Prova personalmente