Le Modali in Bootstrap sono finestre di dialogo modale che vengono usate per visualizzare contenuti o richiedere azioni all’utente. Per capirci, sono le finestre di pop-up.
Sono, certamente, utili per mostrare informazioni aggiuntive, raccogliere dati tramite form o per presentare all’utente nuove opzioni di interazione leggere, senza dover proporre una nuova pagina Html.
Le modali di Bootstrap sono, generalmente, costituite da una struttura html che include un contenitore principale, un’intestazione, un corpo e un piè di pagina.
Il comportamento e lo stile delle modali possono essere personalizzati attraverso il linguaggio CSS e il linguaggio JavaScript o altri sistemi.
Le modali sono intrusive e impediscono all’utente di interagire con la pagina dietro la modale fino a quando non viene chiusa. Possono contenere testo, form, immagini, video o qualsiasi altro contenuto html. Possono essere personalizzate con le classi di Bootstrap per cambiare l’aspetto e il comportamento.
Se ti stai chiedendo quando le modali possano servirti, i casi di applicazione di questo componente potrebbero essere creare finestre di dialogo di conferma, finestre di dialogo di inserimento dati o qualsiasi altro tipo di finestra di dialogo che richieda l’interazione dell’utente.
I moduli pop-up, comunque, sono di grande utilità ed impatto nello sviluppo di siti web coinvolgenti. Facciamo, ora, un esempio completo e funzionante che prevede uno schermo su tre colonne con una domanda in terza colonna. –
Cliccando ciascuna delle due possibili risposte, otterremo un diverso pop-up.
Come vedrai, abbiamo inserito tutte le componenti necessarie per usare il codice. Se lo ritieni troppo complesso per questa fase di apprendimento, guarda le schermate che seguono il codice e vai avanti. Ritroverai tutto (e molto di più!) nel prototipo del tuo primo website con Bootstrap!
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap demo</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container p-3 my-3 border rounded shadow-lg">
<div class="row g-3">
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="p-3 border rounded text-bg-light">
<h1>Bel titolo 1</h1>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="p-3 border rounded text-bg-warning">
<h1>Bel titolo 2</h1>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="row mb-3">
<div class="text-center p-3 border rounded text-bg-light shadow">
<h3 class="p-3 text-bg-secondary rounded">Popup Modali</h3>
<h2>Siamo stati chiari?</h2>
<!-- Button trigger modal -->
<button
type="button"
class="btn btn-success"
data-bs-toggle="modal"
data-bs-target="#exampleModalYes"
>
Sì
</button>
<button
type="button"
class="btn btn-danger"
data-bs-toggle="modal"
data-bs-target="#exampleModalNo"
>
No
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalYes"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">
Siamo stati chiari!
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Bene!</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Chiudi
</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div
class="modal fade"
id="exampleModalNo"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">
Non siamo stati chiari...
</h1>
<button
type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close"
></button>
</div>
<div class="modal-body">Come possiamo aiutarti?</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-bs-dismiss="modal"
>
Chiudi
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /row -->
</div>
<!-- /container -->
</div>
<!-- /row -->
</div>
<!-- /container -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
crossorigin="anonymous"
></script>
</body>
</html>
Ecco cosa vedrai eseguendo il codice:
Questa è l’esecuzione, evidenziando il tasto sì.
Questa è la risposta alla pressione del tasto “Sì”.
