Bootstrap include, oltre ad una serie di direttive CSS, anche un insieme di funzionalità offerta attraverso JavaScript.
In tal senso, le finestre modali rappresentano un interessante modo di convogliare informazioni senza uscire dalla pagina.
Per poter creare una finestra modale con Bootstrap, è sufficiente utilizzare questo pezzo di markup:
<div class="modal fade" id="confirmModal" aria-hidden="true" role="dialog"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span aria-hidden="true">×</span> <span class="sr-only">Chiudi</span> </button> <h4 class="modal-title">Titolo</h4> </div> <div class="modal-body"> <p>Contenuto</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Annulla</button> <button type="button" class="btn btn-primary">Salva</button> </div> </div> </div> </div>
Per invocare l'apertura della finestra, è sufficiente inserire un markup come questo:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#confirmModal">Apri</button>
Grazia all'attributo data-target, potremo indicare l'ID del tag su cui abbiamo inserito la nostra finestra modale.
Resta possibile invocare l'apertura della finestra anche via JavaScript:
$('#confirmModal').modal('toggle');
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Disabilitare automaticamente un workflow di GitHub
Evitare (o ridurre) il repo-jacking sulle GitHub Actions
Potenziare Azure AI Search con la ricerca vettoriale
Eseguire operazioni con timeout in React
Creare gruppi di client per Event Grid MQTT
Ottimizzazione dei block template in Angular 17
Creazione di plugin per Tailwind CSS: espandere le Funzionalità del Framework
Registrare servizi multipli tramite chiavi in ASP.NET Core 8
Utilizzare la versione generica di EntityTypeConfiguration in Entity Framework Core
Utilizzare politiche di resiliency con Azure Container App
Short-circuiting della Pipeline in ASP.NET Core