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
Reactive form tipizzati con modellazione del FormBuilder in Angular
Potenziare Azure AI Search con la ricerca vettoriale
Eseguire attività basate su eventi con Azure Container Jobs
Utilizzare il trigger SQL con le Azure Function
Installare le Web App site extension tramite una pipeline di Azure DevOps
Accesso sicuro ai secrets attraverso i file in Azure Container Apps
Gestire il colore CSS con HWB
Effettuare il refresh dei dati di una QuickGrid di Blazor
Hosting di componenti WebAssembly in un'applicazione Blazor static
Load test di ASP.NET Core con k6
Eseguire query per recuperare il padre di un record che sfrutta il tipo HierarchyID in Entity Framework
Come migrare da una form non tipizzata a una form tipizzata in Angular