twitter-bootstrap
Dialoghi modali

Osservazioni

Utilizzo HTML di base

Una finestra di dialogo modale Bootstrap è un componente Bootstrap che crea una finestra di dialogo modale che fluttua sul contenuto a livello di pagina.

Ecco un esempio dell'uso di base di una finestra di dialogo modale Bootstrap in HTML:

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Utilizzo e inizializzazione di Javascript di base

Le componenti di dialogo modale possono essere istanziate tramite jQuery con la funzione $('#myModal').modal(options) , dove $('#myModal') è un riferimento di livello superiore alla finestra di dialogo modale specifica e le options sono un oggetto Javascript che specifica gli attributi di default della finestra di dialogo modale.

L'oggetto options consente di definire più proprietà che influiranno sul comportamento della finestra di dialogo modale. Queste proprietà sono definite come tali:

• La proprietà backdrop consente a un utente di definire se desidera che venga visualizzata una sovrapposizione di sfondo grigio dietro la finestra di dialogo modale. Entrambi i valori booleani e la stringa "statica" sono riconosciuti. Se viene specificato "statico", la finestra di dialogo modale non verrà chiusa quando un utente fa clic sulla sovrapposizione dello sfondo.
• La proprietà della keyboard consente a un utente di definire se desidera che la finestra di dialogo modale venga chiusa quando si preme il tasto Esc sulla tastiera.
• La proprietà show consente a un utente di definire se desidera che la finestra di dialogo modale appaia quando viene inizializzata la modal.

Ecco un esempio dell'utilizzo Javascript di base:

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

Come con altri componenti Bootstrap, le opzioni del modale possono anche essere specificate in HTML tramite attributi di dati.