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
Implementare il throttling in ASP.NET Core
Recuperare un elemento inserito nella cache del browser tramite API JavaScript
Le novità di Angular: i miglioramenti alla CLI
Paginare i risultati con QuickGrid in Blazor
Specificare il versioning nel path degli URL in ASP.NET Web API
Potenziare Azure AI Search con la ricerca vettoriale
Utilizzare Tailwind CSS all'interno di React: installazione
Eseguire le GitHub Actions offline
Eseguire una GroupBy per entity in Entity Framework
Usare un KeyedService di default in ASP.NET Core 8
Routing statico e PreRendering in una Blazor Web App
Usare le collection expression per inizializzare una lista di oggetti in C#
I più letti di oggi
- Vuoi incontrare Bill Gates? Viaggia con ASPItalia.com!
- Customizzare il pager del DataGrid
- Stabilire un collegamento VPN tra una Web App e una Virtual Network
- Documentare ASP.NET Web API con Swagger
- Usare i servizi REST di BING per ottenere informazioni sulla posizione dell'utente
- Visual Studio 2005 CTP May