Bootstrap - Modali: Una Guida per Principianti

Ciao a tutti, futuri sviluppatori web! Oggi esploreremo il mondo emozionante dei modali di Bootstrap. Non preoccupatevi se non avete mai sentito parlare di loro prima - alla fine di questo tutorial, sarete in grado di creare finestre a comparsa come un professionista!

Bootstrap - Modal

Cos'è un Modal?

Prima di immergerci, cerchiamo di capire cos'è un modal. Immagina di leggere un libro e, suddenemente, una piccola nota adesiva compare con informazioni importanti. Questo è essenzialmente ciò che fa un modal su un sito web! È una finestra di dialogo o una finestra a comparsa che appare sopra la pagina corrente.

Componenti del Modal

Iniziamo con la struttura di base di un modal Bootstrap:

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Titolo del Modal</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Chiudi"></button>
</div>
<div class="modal-body">
<p>Il testo del corpo del modal va qui.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
<button type="button" class="btn btn-primary">Salva le modifiche</button>
</div>
</div>
</div>
</div>

Analizziamo questa struttura:

Il <div> più esterno con la classe "modal" è il contenitore principale.
All'interno, abbiamo il "modal-dialog" che controlla la forma e la posizione del modal.
Il "modal-content" contiene il contenuto effettivo del nostro modal.
Abbiamo poi tre sezioni: intestazione, corpo e piè di pagina.

Sfondo Statico

A volte, vuoi che il tuo modal rimanga visibile fino a quando l'utente non interagisce con esso. È qui che entra in gioco lo sfondo statico:

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- Contenuto del modal -->
</div>

Aggiungendo data-bs-backdrop="static", il modal non si chiuderà cliccando fuori da esso. data-bs-keyboard="false" impedisce la chiusura con il tasto Esc.

Modal Scrolling

Hai molto contenuto? Nessun problema! Rendi il tuo modal scrollabile:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Contenuto del modal -->
</div>

Aggiungere la classe modal-dialog-scrollable permette al corpo del modal di scorrere mantenendo l'intestazione e il piè di pagina in-place.

Centrato Verticalmente

Vuoi che il tuo modal sia esattamente al centro dello schermo? Facile facile!

<div class="modal-dialog modal-dialog-centered">
<!-- Contenuto del modal -->
</div>

La classe modal-dialog-centered fa il lavoro per centerare il tuo modal verticalmente.

Tooltips e Popovers

Puoi anche utilizzare tooltip e popovers all'interno dei tuoi modali. Ricorda solo di inizializzarli:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

Utilizzo della Griglia

Il sistema di griglia di Bootstrap funziona anche all'interno dei modali! Ecco un esempio:

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

Questo crea una layout a due colonne all'interno del corpo del tuo modal.

Variare il Contenuto del Modal

Puoi cambiare dinamicamente il contenuto del tuo modal. Ecco come:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = 'Nuovo messaggio per ' + recipient
modalBodyInput.value = recipient
})

Questo script cambia il contenuto del modal in base al pulsante che lo ha attivato.

Commutazione tra Modali

Puoi anche passare da un modal all'altro:

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- Contenuto del primo modal -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">Apri il secondo modal</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- Contenuto del secondo modal -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Torna al primo</button>
</div>

Cambiare l'Animazione

Vuoi rendere l'ingresso del tuo modal più interessante? Prova a cambiare l'animazione:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- Contenuto del modal -->
</div>

La classe fade aggiunge un gradevole effetto di dissolvenza. Puoi creare animazioni personalizzate utilizzando CSS!

Altezze Dinamiche

I modali possono adattare la loro altezza in base al contenuto:

<div class="modal-dialog modal-dialog-scrollable">
<!-- Contenuto del modal con altezze variabili -->
</div>

La classe modal-dialog-scrollable garantisce che il tuo modal sembri bene indipendentemente dalla lunghezza del contenuto.

Accessibilità

Sempre considerare l'accessibilità! Usa aria-labelledby per fare riferimento al titolo del modal:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Titolo del Modal</h5>
<!-- Resto del contenuto del modal -->
</div>
</div>
</div>
</div>

Dimensioni Opzionali

I modali sono disponibili in diverse dimensioni:

<!-- Modal piccolo -->
<div class="modal-dialog modal-sm">...</div>

<!-- Modal grande -->
<div class="modal-dialog modal-lg">...</div>

<!-- Modal extra grande -->
<div class="modal-dialog modal-xl">...</div>

Modal a Schermo Intero

Vuoi che il tuo modal occupi tutto lo schermo? Usa le classi fullscreen:

<div class="modal-dialog modal-fullscreen">
<!-- Contenuto del modal -->
</div>

Puoi anche renderlo fullscreen solo su determinate dimensioni di schermo:

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- Contenuto del modal -->
</div>

Questo modal sarà fullscreen su schermi piccoli e inferiori.

Ecco fatto! Ora sei equipaggiato con le conoscenze per creare modali straordinari utilizzando Bootstrap. Ricorda, la pratica rende perfetti, quindi non aver paura di sperimentare con questi concetti. Buon codice!

Credits: Image by storyset

Tutorial precedente:

Bootstrap - Gruppo di elenco

Prossimo tutorial:

Bootstrap - Barre di navigazione