Dall'archivio script > HTML5

Gestione delle finestre modali in HTML5 con Bootstrap

di Daniele BochicchioDaniele Bochicchio, in HTML5, CSS3, Boostrap,

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

Visualizza/aggiungi commenti

| Condividi su: LinkedIn, Facebook
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi