JS modale (modal.js)
Il plugin Modal è una finestra di dialogo / pop-up di dialogo che viene visualizzata sulla parte superiore della pagina corrente.
Per un tutorial su Modals, leggere la nostra Bootstrap modale tutorial .
Le Classi modale Plugin
| Classe | Descrizione |
|---|---|
| .modal | Crea un modal |
| .modal-content | Stili modale correttamente con bordo, background-color, ecc utilizzare questa classe per aggiungere del modal intestazione, corpo e piè di pagina. |
| .modal-header | Definisce lo stile per l'intestazione del modal |
| .modal-body | Definisce lo stile del corpo del modal |
| .modal-footer | Definisce lo stile per il piè di pagina nella modale. Nota: Questa area è allineato a destra per impostazione predefinita. Per modificare questo, sovrascrivere CSS con text-align: left | center |
| .modal-sm | Specifica una piccola modale |
| .modal-lg | Specifica un grande modale |
| .fade | Aggiunge un effetto di animazione / transizione che svanisce modale dentro e fuori |
Attivare il modale Via data-* Attributi
Aggiungere data-toggle="modal" e data-target="#modalID" a qualsiasi elemento.
Nota: per <a> elementi, omettere data-target , e utilizzare href="#modalID" invece:
Esempio
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Links -->
<a data-toggle="modal"
href="#myModal">Open
Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open
Modal</p>
Prova tu stesso " Trigger Via JavaScript
Attivare manualmente con:
Opzioni modali
Le opzioni possono essere passati attraverso gli attributi di dati o JavaScript. Per gli attributi dei dati, aggiungere il nome opzione per data-, come nel data-backdrop="" .
| Nome | Digitare | Predefinito | Descrizione | Provalo |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Specifica se il modale dovrebbe avere una sovrapposizione di scuro:
Se si specifica il valore "static" , non è possibile chiudere il modal quando si fa clic al di fuori di esso | Utilizzando JS Utilizzando i dati |
| keyboard | boolean | true | Specifica se il modale può essere chiuso con il tasto Esc (Esc) :
| Utilizzando JS Utilizzando i dati |
| show | boolean | true | Specifica se mostrare il modal quando inizializzato | Utilizzando JS Utilizzando i dati |
Metodi modali
La seguente tabella elenca i metodi modali tutti disponibili.
| metodo | Descrizione | Provalo |
|---|---|---|
| .modal( options ) | Attiva il contenuto come modale. Vedere opzioni di cui sopra per i valori validi | Provalo |
| .modal("toggle") | Alterna il modal | Provalo |
| .modal("show") | Apre il modal | Provalo |
| .modal("hide") | Nasconde il modal | Provalo |
modali Eventi
La seguente tabella elenca gli eventi modali tutti disponibili.
| Evento | Descrizione | Provalo |
|---|---|---|
| show.bs.modal | Si verifica quando modale sta per essere mostrato | Provalo |
| shown.bs.modal | Si verifica quando il modal è completamente mostrato (dopo le transizioni CSS hanno completato) | Provalo |
| hide.bs.modal | Si verifica quando il modal è in procinto di essere nascosto | Provalo |
| hidden.bs.modal | Si verifica quando il modal è completamente nascosta (dopo le transizioni CSS hanno completato) | Provalo |
Esempi
Accesso modale
L'esempio seguente crea un modal per il login:
Esempio
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-default btn-lg" id="myBtn">Login</button>
<!--
Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span>
Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter
password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon
glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left"
data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>
Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div> Prova tu stesso "