Come funzionano le Modali in bootstrap
Lezione 11 / 15
-cover.jpg)
Di Leo Sorge
bootstrap
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>
</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ì”.
Precedente
10 Boostrap Panel: come..Successivo
12 Come scrivere una ta..Le nostre guide possono essere molto utili per muovere i primi passi nel mondo della programmazione, ma se vuoi iniziare una nuova carriera in ambito digital & tech con il supporto costante dei docenti e tantissime esercitazioni pratiche, ti consigliamo di frequentare uno dei corsi della nostra Hackademy!
Scopri i corsi