Bootstrap - Plugin modale

Un modale è una finestra figlia che è sovrapposta alla sua finestra genitore. In genere, lo scopo è visualizzare il contenuto da un'origine separata che può avere qualche interazione senza lasciare la finestra principale. Le finestre secondarie possono fornire informazioni, interazioni o altro.

Se desideri includere questa funzionalità di plugin individualmente, allora avrai bisogno di modal.js. Altrimenti, come menzionato nel capitolo Panoramica sui plug-in Bootstrap , puoi includere bootstrap.js o bootstrap.min.js minimizzato .

Utilizzo

Puoi attivare il contenuto nascosto del plug-in modale -

  • Via data attributes - Imposta attributo data-toggle = "modal" su un elemento del controller, come un pulsante o un collegamento, insieme a un file data-target = "#identifier" o href = "#identifier" per scegliere come target un modale specifico (con id = "identificatore") da attivare.

  • Via JavaScript - Usando questa tecnica puoi chiamare un modale con id = "identificatore" con una singola riga di JavaScript -

$('#identifier').modal(options)

Esempio

Un esempio di finestra modale statica è mostrato nel seguente esempio:

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

Details of the preceding code −

  • Per richiamare la finestra modale, è necessario disporre di una sorta di trigger. Puoi utilizzare un pulsante o un collegamento. Qui abbiamo usato un pulsante.

  • Se guardi nel codice sopra, vedrai che nel tag <button>, il data-target = "#myModal"è l'obiettivo del modale che vuoi caricare sulla pagina. Questo codice ti consente di creare più modali sulla pagina e quindi avere diversi trigger per ciascuno di essi. Ora, per essere chiari, non carichi più modali contemporaneamente, ma puoi crearne molti sulle pagine per caricarli in momenti diversi.

  • Ci sono due classi di cui prendere nota nel modale:

    • Il primo è .modal, che identifica semplicemente il contenuto di <div> come modale.

    • E il secondo è il .fadeclasse. Quando il modale è attivato, il contenuto verrà visualizzato in dissolvenza in entrata e in uscita.

  • aria-labelledby = "myModalLabel", attributo fa riferimento al titolo modale.

  • L'attributo aria-hidden = "true" viene utilizzato per mantenere invisibile la finestra modale fino a quando non viene attivato un trigger (come un clic sul pulsante associato).

  • <div class = "modal-header">, modal-header è la classe per definire lo stile per l'intestazione della finestra modale.

  • class = "close", è una chiusura della classe CSS che imposta lo stile per il pulsante Chiudi della finestra modale.

  • data-dismiss = "modal", è un attributo di dati HTML5 personalizzato. Qui viene utilizzato per chiudere la finestra modale.

  • class = "modal-body", è una classe CSS di Bootstrap CSS per impostare lo stile per il corpo della finestra modale.

  • class = "modal-footer", è una classe CSS di Bootstrap CSS per impostare lo stile per il piè di pagina della finestra modale.

  • data-toggle = "modal", L'attributo dati personalizzato HTML5 data-toggle viene utilizzato per aprire la finestra modale.

Opzioni

Ci sono alcune opzioni che possono essere passate tramite attributi di dati o JavaScript per personalizzare l'aspetto della finestra modale. La tabella seguente elenca le opzioni:

Nome opzione Tipo / valore predefinito Nome attributo dati Descrizione
sfondo booleano o la stringa "statica" Predefinito: vero contesto dei dati Specificare statico per uno sfondo, se non si desidera che il modale venga chiuso quando l'utente fa clic al di fuori del modale.
tastiera booleano Predefinito: vero tastiera dati Chiude il modale quando viene premuto il tasto Esc; impostato su false per disabilitare.
mostrare booleano Predefinito: vero data-spettacolo Mostra il modale quando inizializzato.
a distanza percorso predefinito: false dati remoti

Utilizzando il metodo jQuery .load , inserisci il contenuto nel corpo modale. Se viene aggiunto un href con un URL valido, caricherà quel contenuto. Un esempio di ciò è mostrato di seguito:

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

Metodi

Ecco alcuni metodi utili che possono essere usati con modal ().

Metodo Descrizione Esempio
Options - .modal (opzioni) Attiva il tuo contenuto come modale. Accetta un oggetto opzioni opzionale. 
$('#identifier').modal({
   keyboard: false
})
Toggle - .modal ('toggle') Commuta manualmente un modale. 
$('#identifier').modal('toggle')
Show - .modal ('mostra') Apre manualmente un modale. 
$('#identifier').modal('show')
Hide - .modal ('nascondi') Nasconde manualmente un modale. 
$('#identifier').modal('hide')

Esempio

Il seguente esempio dimostra l'utilizzo dei metodi:

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

Basta fare clic sul pulsante Esc e la finestra modale si chiude.

Eventi

La tabella seguente elenca gli eventi su cui lavorare con modal. Questi eventi possono essere utilizzati per agganciarsi alla funzione.

Evento Descrizione Esempio
show.bs.modal Sparato dopo che è stato chiamato il metodo show. 
$('#identifier').on('show.bs.modal', function () {
   // do something…
})
mostrato.bs. modale Attivato quando il modale è stato reso visibile all'utente (aspetterà il completamento delle transizioni CSS). 
$('#identifier').on('shown.bs.modal', function () {
   // do something…
})
hide.bs.modal Attivato quando è stato chiamato il metodo di istanza hide. 
$('#identifier').on('hide.bs.modal', function () {
   // do something…
})
hidden.bs.modal Sparato quando il modale ha finito di essere nascosto all'utente. 
$('#identifier').on('hidden.bs.modal', function () {
   // do something…
})

Esempio

L'esempio seguente mostra l'utilizzo degli eventi:

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
               ×
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

Come si vede nella schermata sopra, se si fa clic sul pulsante Chiudi , ovvero nascondi evento, viene visualizzato un messaggio di avviso.