JS Modal (modal.js)
Le plugin Modal est une fenêtre de dialogue boîte / pop-up qui apparaît en haut de la page en cours.
Pour un tutoriel sur modaux, lisez notre Bootstrap Tutorial Modal .
Les classes Modal Plugin
| Classe | La description |
|---|---|
| .modal | Crée un modal |
| .modal-content | Styles modal correctement avec la frontière, background-color, etc. Utilisez cette classe pour ajouter en-tête, le corps et le pied de page du modal. |
| .modal-header | Définit le style de l'en-tête du modal |
| .modal-body | Définit le style pour le corps du modal |
| .modal-footer | Définit le style pour le pied dans le modal. Note: Cette zone est aligné à droite par défaut. Pour changer cela, remplacer CSS avec text-align: left | center |
| .modal-sm | Indique un petit modal |
| .modal-lg | Indique un grand modal |
| .fade | Ajoute un effet d'animation / transition qui se fane le modal dans et hors |
Déclencher le Modal Via data-* Attributs
Ajouter des data-toggle="modal" et des data-target="#modalID" à tout élément.
Remarque: Pour <a> éléments, omettre les data-target , et utiliser href="#modalID" à la place:
Exemple
<!-- 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>
Essayez - le vous - même » Trigger Via JavaScript
Activer manuellement:
options de Modal
Les options peuvent être transmises par l'intermédiaire des attributs de données ou JavaScript. Pour les attributs de données, ajoutez le nom de l' option pour de données, comme dans les data-backdrop="" .
| prénom | Type | Défaut | La description | Essayez-le |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | Indique si le modal doit avoir une superposition sombre:
Si vous spécifiez la valeur "static" , il est impossible de fermer le modal en cliquant en dehors de celui - ci | Utilisation de JS Utilisation des données |
| keyboard | boolean | true | Indique si le modal peut être fermé avec la touche d'échappement (Esc) :
| Utilisation de JS Utilisation des données |
| show | boolean | true | Indique si vous souhaitez afficher le modal lorsque initialisée | Utilisation de JS Utilisation des données |
Méthodes modales
Le tableau suivant répertorie les méthodes modales tous disponibles.
| méthode | La description | Essayez-le |
|---|---|---|
| .modal( options ) | Active le contenu comme un modal. Voir options ci-dessus pour les valeurs valides | Essayez - le |
| .modal("toggle") | Alterne modal | Essayez - le |
| .modal("show") | Ouvre le modal | Essayez - le |
| .modal("hide") | Masque le modal | Essayez - le |
Modal Events
Le tableau suivant répertorie les événements modaux tous disponibles.
| un événement | La description | Essayez-le |
|---|---|---|
| show.bs.modal | Survient lorsque le modal est sur le point d'être montré | Essayez - le |
| shown.bs.modal | Survient lorsque le modal est entièrement représenté (après les transitions CSS ont terminé) | Essayez - le |
| hide.bs.modal | Survient lorsque le modal est sur le point d'être caché | Essayez - le |
| hidden.bs.modal | Survient lorsque le modal est entièrement caché (après les transitions CSS ont terminé) | Essayez - le |
Exemples
Connexion Modal
L'exemple suivant crée un modal pour la connexion:
Exemple
<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> Essayez - le vous - même »