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
Definire lo stile CSS in base alle dimensioni del container
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Usare le variabili per personalizzare gli stili CSS
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Routing statico e PreRendering in una Blazor Web App
Trasformare qualsiasi backend in un servizio GraphQL con Azure API Management
Inizializzare i container in Azure Container Apps
Eseguire attività basate su eventi con Azure Container Jobs
Utilizzare la libreria Benchmark.NET per misurare le performance
Visualizzare le change sul plan di Terraform tramite le GitHub Actions
Gestire errori funzionali tramite exception in ASP.NET Core Web API
Le novità di Angular: i miglioramenti alla CLI