GUIDE PER ASPIRANTI PROGRAMMATORI
Come funzionano le Modali in 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…
Lezione 11 / 15
Vuoi avviare una nuova carriera o fare un upgrade?
Trova il corso Digital & Tech più adatto a te nel nostro catalogo!
- Bootstrap framework: le classi
- Bootstrap container: cosa sono e come funzionano
- Bootstrap grid system: come funziona la griglia di Bootstrap
- Classi di colonna e bootstrap breakpoints
- Boostrap Navbar: come funziona e come farne una
- Boostrap Panel: come fare un pannello in Bootstrap
- Come funzionano le Modali in bootstrap
- Come scrivere una tabella in Bootstrap
- Bootstrap Carousel: cos'è e come funziona
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/[email protected]/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/[email protected]/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ì”.
Sei indeciso sul percorso? 💭
Parliamone! Scrivici su Whatsapp e risponderemo a tutte le tue domande per capire quale dei nostri corsi è il più adatto alle tue esigenze.
CONTENUTI GRATUITI IN EVIDENZA
Guide per aspiranti programmatori 👨🏻🚀
Vuoi muovere i primi passi nel Digital e Tech? Abbiamo preparato alcune guide per aiutarti a orientarti negli ambiti più richiesti oggi.
