Come funzionano le Modali in bootstrap

Lezione 11 / 15

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&igrave;
                        </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:

Prima renderizzazione codice modali

Questa è l’esecuzione, evidenziando il tasto sì.

Esecuzione modale 1

Questa è la risposta alla pressione del tasto “Sì”.

Esecuzione del tasto si modale

10 Boostrap Panel: come..

12 Come scrivere una ta..

Guida Bootstrap in italiano 1 Bootstrap cos'è 2 Editor di codice: VSC 3 Come usare Bootstrap 4 Vantaggi e peculiarità di Bootstrap 5 Bootstrap framework: le classi 6 Bootstrap container: cosa sono e come funzionano 7 Bootstrap grid system: come funziona la griglia di Bootstrap 8 Classi di colonna e bootstrap breakpoints 9 Boostrap Navbar: come funziona e come farne una 10 Boostrap Panel: come fare un pannello in Bootstrap 11 Come funzionano le Modali in bootstrap 12 Come scrivere una tabella in Bootstrap 13 Bootstrap Carousel: cos'è e come funziona 14 Personalizzare Bootstrap 15 Crea un sito web con bootstrap framework!

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