Pdf bootstrap modal [Eng]

Problème à signaler:

Télécharger



★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

pdf bootstrap modal [Eng]

Créer des modaux avec Bootstrap

Modal est essentiellement une boîte de dialogue ou une fenêtre contextuelle utilisée pour fournir des informations importantes à l'utilisateur ou à l'utilisateur pour l'inviter à prendre les mesures nécessaires avant de poursuivre. Les modaux sont largement utilisés pour avertir les utilisateurs de situations telles que l'expiration du délai de session ou pour recevoir leur confirmation finale avant d'exécuter des actions critiques telles que la sauvegarde ou la suppression de données importantes.

Vous pouvez facilement créer des boîtes de dialogue très intelligentes et flexibles avec le plug-in modal Bootstrap.

L'exemple suivant vous montrera comment créer un modal simple avec un en-tête, un corps de message et un pied de page contenant des boutons d'action pour l'utilisateur.

Exemple

Essayez ce code »

  • <div id = "myModal" class = "fondu modal">
  • <div class = "modal-dialog">
  • <div class = "modal-content">
  • <div class = "modal-header">
  • <type de bouton = "bouton" class = "fermer" data-rejet = "modal" aria-hidden = "true"> & times; </ button>
  • <h4 class = "modal-title"> Confirmation </ h4>
  • </ div>
  • <div class = "modal-body">
  • <p> Souhaitez-vous enregistrer les modifications que vous avez apportées au document avant de le fermer? </ P>
  • <p class = "text-warning"> <small> Si vous n'enregistrez pas, vos modifications seront perdues. </ Small> </ p>
  • </ div>
  • <div class = "modal-footer">
  • <type de bouton = "bouton" class = "btn btn-default" data-licencié = "modal"> Fermer </ bouton>
  • <type de bouton = "bouton" class = "btn btn-primary"> Enregistrer les modifications </ button>
  • </ div>
  • </ div>
  • </ div>
  • </ div>

- L'exemple ci-dessus lance automatiquement la fenêtre modale lorsque le DOM est entièrement chargé via JavaScript. La sortie ressemblera à ceci:

Conseil: essayez toujours de placer votre code HTML modal à un niveau supérieur dans votre document, de préférence avant la fermeture de la balise <body> (c.-à-d. </ Body>), afin d'éviter toute interférence d'autres éléments. Sinon, cela pourrait affecter l'apparence ou les fonctionnalités de modal.

Consultez la section sur les extraits pour obtenir des exemples de modaux Bootstrap magnifiquement conçus.

Activer les modaux via les attributs de données

Vous pouvez activer un modal Bootstrap en cliquant sur le bouton ou sur le lien via les attributs de données sans écrire de code JavaScript. Voir l'exemple suivant:

Exemple

Essayez ce code »

  • <! - Button HTML (to Trigger Modal) ->
  • <a href="#myModal" role="button" class="btn btn-large btn-primary" data-toggle="modal"> Lancer le modal de démonstration </a>
  • <! - HTML modal ->
  • <div id = "myModal" class = "fondu modal">
  • <div class = "modal-dialog">
  • <div class = "modal-content">
  • <div class = "modal-header">
  • <type de bouton = "bouton" class = "fermer" data-rejet = "modal" aria-hidden = "true"> & times; </ button>
  • <h4 class = "modal-title"> Confirmation </ h4>
  • </ div>
  • <div class = "modal-body">
  • <p> Souhaitez-vous enregistrer les modifications que vous avez apportées au document avant de le fermer? </ P>
  • <p class = "text-warning"> <small> Si vous n'enregistrez pas, vos modifications seront perdues. </ Small> </ p>
  • </ div>
  • <div class = "modal-footer">
  • <type de bouton = "bouton" class = "btn btn-default" data-licencié = "modal"> Fermer </ bouton>
  • <type de bouton = "bouton" class = "btn btn-primary"> Enregistrer les modifications </ button>
  • </ div>
  • </ div>
  • </ div>
  • </ div>

L'exemple ci-dessus lance la fenêtre modale en cliquant sur le bouton "Lancer la démo modale". Parcourons chaque partie de ce code modal une par une pour une meilleure compréhension.

Explication du code

Pour activer un modal Bootstrap via des attributs de données, nous avons essentiellement besoin de deux composants: l’élément contrôleur, comme un bouton ou un lien, et l’élément modal lui-même.

  • Le conteneur le plus externe de chaque modal dans un document doit avoir un identifiant unique (dans ce cas id = "myModal", ligne n ° 5), afin de pouvoir être ciblé via data-target (pour les boutons) ou href (pour les hyperliens ) attribut de l’élément contrôleur (ligne n ° 2).
  • L'attribut data-toggle = "modal" est requis pour ajouter l'élément contrôleur (ligne no-2), comme un bouton ou une ancre, avec un attribut data-target = "# myModal" ou href = "# myModal "pour cibler un modal spécifique à basculer.
  • La classe .modal-dialog (ligne n ° 6) définit la largeur ainsi que l'alignement horizontal et vertical de la zone modale. Alors que la classe .modal-content définit les styles comme le texte et la couleur de fond, les bordures, les coins arrondis, etc.

Le reste de la chose est explicite, tel que l’élément .modal-header définisse un en-tête pour le modal qui contient généralement un titre modal et un bouton de fermeture, tandis que l’élément .modal-body contient le contenu réel tel que du texte, des images, des formulaires. etc. et l’élément .modal-footer définit le pied de page qui contient généralement des boutons d’action pour l’utilis

Remarque: La classe .fade de l'élément .modal ajoute un effet d'animation en fondu et en glissement tout en affichant et en masquant la fenêtre modale. Si vous voulez que les modaux apparaissent simplement sans aucun effet, vous pouvez simplement supprimer cette classe.

Activer les modaux via JavaScript

Vous pouvez également activer une fenêtre modale Bootstrap via JavaScript - appelez simplement la méthode bootstrap modal () avec l'identifiant modal ou le sélecteur de classe dans votre code JavaScript.

Exemple

Essayez ce code »

  1. <script type = "text / javascript">
  2. $ (document) .ready (fonction () {
  3. $ (". Btn"). Click (function () {
  4. $ ("# myModal"). Modal ('show');

5.});

6.});

  1. </ script>

Changer la taille des modaux

Bootstrap vous offre la possibilité de redimensionner un modal. Vous pouvez augmenter ou réduire la taille des modaux en ajoutant une classe supplémentaire .modal-lg ou .modal-sm sur .modal-dialog.

Exemple

Essayez ce code »

  • <! - Large modal ->
  • <button class = "btn btn-primaire" data-toggle = "modal" data-target = "# largeModal"> Grand modal </ button>
  • <div id = "largeModal" class = "fondu modal bs-example-modal-lg" tabindex = "- 1" role = "dialog">
  • <div class = "modal-dialog modal-lg">
  • <div class = "modal-content">
  • <div class = "modal-header">
  • <type de bouton = "bouton" class = "fermer" data-rejet = "modal" aria-hidden = "true"> & times; </ button>
  • <h4 class = "modal-title"> Grand modal </ h4>
  • </ div>
  • <div class = "modal-body">
  • <p> Ajoutez la classe <code> .modal-lg </ code> sur <code> .modal-dialog </ code> pour créer ce grand modal. </ P>
  • </ div>
  • <div class = "modal-footer">
  • <type de bouton = "bouton" class = "btn btn-default" data-rejet = "modal"> Annuler </ bouton>
  • <type de bouton = "bouton" class = "btn btn-primary"> OK </ bouton>
  • </ div>
  • </ div>
  • </ div>
  • </ div>
  • <! - Petit modal ->
  • <button class = "btn btn-primaire" data-toggle = "modal" data-target = "# smallModal"> Petit modal </ button>
  • <div id = "smallModal" class = "fondu modal" tabindex = "- 1" role = "dialog">
  • <div class = "modal-dialog modal-sm">
  • <div class = "modal-content">
  • <div class = "modal-header">
  • <type de bouton = "bouton" class = "fermer" data-rejet = "modal" aria-hidden = "true"> & times; </ button>
  • <h4 class = "modal-title"> Petit modal </ h4>
  • </ div>
  • <div class = "modal-body">
  • <p> Ajoutez la classe <code> .modal-sm </ code> sur <code> .modal-dialog </ code> pour créer ce petit modal. </ P>
  • </ div>
  • <div class = "modal-footer">
  • <type de bouton = "bouton" class = "btn btn-default" data-rejet = "modal"> Annuler </ bouton>
  • <type de bouton = "bouton" class = "btn btn-primary"> OK </ bouton>
  • </ div>
  • </ div>
  • </ div>
  • </ div>

Modification du contenu modal en fonction du bouton de déclenchement

Souvent, plusieurs modaux sur une page Web ont presque le même contenu avec des différences mineures.

Vous pouvez utiliser les événements modaux pour créer des fenêtres modales légèrement différentes, basées sur le même code HTML modal. L'exemple suivant modifiera le titre de la fenêtre modale en fonction de la valeur de l'attribut data-title du bouton de déclenchement.

Exemple

Essayez ce code »

  • <script type = "text / javascript">
  • $ (document) .ready (function () {
  • $ ("# myModal"). On ('show.bs.modal', function (event) {
  • // Bouton Get qui a déclenché le modal
  • var button = $ (event.relatedTarget);
  • // Extraire la valeur des attributs data- *
  • var titleData = button.data ('title');
  • $ (this) .find ('. Modal-title'). Text (titleData + 'Form');
  • });
  • });
  • </ script>

Les options

Certaines options peuvent être passées à la méthode modal () Bootstrap pour personnaliser les fonctionnalités d'un modal. Les options peuvent être transmises via des attributs de données ou JavaScript.

Pour définir les options de modaux via les attributs de données, ajoutez simplement le nom de l'option à data-, comme data-backdrop = "static", data-keyboard = "false" etc.

Nom Type Valeur par défaut Description

toile de fond

booléen

ou la chaîne static true Inclut un élément modal-backdrop (zone de superposition noire). Alternativement, vous pouvez spécifier statique pour un fond qui ne ferme pas le modal au clic.

clavier

boolean true Ferme la fenêtre modale en appuyant sur la touche d'échappement.

spectacle

boolean true Affiche le modal initialisé ou activé.

éloigné

URL false Deprecated Si une URL distante est fournie, le contenu sera chargé une fois via la méthode load () de jQuery et injecté dans la div .modal-content.

Les attributs de données constituent un moyen simple de définir les options modales. Toutefois, JavaScript est le moyen préférable car il vous évite les tâches répétitives. Voir la méthode .modal (options) dans la section ci-dessous pour savoir comment définir les options des modaux à l'aide de JavaScript.

Si vous utilisez l'api de données pour définir les options de la fenêtre modale, vous pouvez également utiliser l'attribut href pour fournir l'URL de la source distante, comme ceci:

Exemple

Essayez ce code »

  • <! - Button HTML (to Trigger Modal) ->
  • <a href="/remote.html" role="button" class="btn btn-large btn-primary" data-toggle="modal" data-target="#myModal"> Lancer le démo modal </a>
  • <! - HTML modal ->
  • <div id = "myModal" class = "fondu modal">
  • <div class = "modal-dialog">
  • <div class = "modal-content">
  • <! - Le contenu sera chargé ici à partir du fichier "remote.php" ->
  • </ div>
  • </ div>
  • </ div>

Remarque: L'option distante pour les modaux Bootstrap est obsolète depuis la version 3.3.0 et sera supprimée dans la prochaine version v4. Utilisez plutôt la structure de modèles côté client ou un cadre de liaison de données, ou appelez vous-même la méthode load () jQuery.

Les méthodes

Voici les méthodes modales du bootstrap standard:

.modal (options)

Cette méthode active le contenu en tant que modal. Il vous permet également de définir des options pour eux.

Le code jQuery dans l'exemple suivant empêchera le modal de se fermer lorsqu'un utilisateur clique sur le fond, c'est-à-dire une zone de superposition noire derrière le modal.

Exemple

Essayez ce code »

  • <script type = "text / javascript">
  • $ (document) .ready (function () {
  • $ (". Launch-modal"). Click (function () {
  • $ ("# myModal"). Modal ({
  • toile de fond: 'statique'
  • });
  • });
  • });
  • </ script>

Le code jQuery suivant empêchera le modal de se fermer en appuyant sur la touche d'échappement.

Exemple

Essayez ce code »

  • <script type = "text / javascript">
  • $ (document) .ready (function () {
  • $ (". Launch-modal"). Click (function () {
  • $ ("# myModal"). Modal ({
  • clavier: faux
  • });
  • });
  • });
  • </ script>

Le code jQuery dans l'exemple suivant créera un modal dans lequel le contenu du modal sera inséré à partir d'un fichier distant lors de l'activation.

Exemple

Essayez ce code »

  • <script type = "text / javascript">
  • $ (document) .ready (function () {
  • $ (". Launch-modal"). Click (function () {
  • $ ("# myModal"). Modal ({
  • remote: '../remote.php'
  • });
  • });
  • });
  • </ script>

.modal ('bascule')

Cette méthode bascule manuellement une fenêtre modale.

Exemple

Essayez ce code »

  1. <script type = "text / javascript">
  2. $ (document) .ready (fonction () {
  3. $ (". Toggle-modal"). Click (function () {
  4. $ ("# myModal"). Modal ('bascule');

5.});

6.});

  1. </ script>

.modal ('show')

Cette méthode peut être utilisée pour ouvrir une fenêtre modale manuellement.

Exemple

Essayez ce code »

  1. <script type = "text / javascript">
  2. $ (document) .ready (fonction () {
  3. $ (". Open-modal"). Click (function () {
  4. $ ("# myModal"). Modal ('show');

5.});

6.});

  1. </ script>

.modal ('masquer')

Cette méthode peut être utilisée pour masquer une fenêtre modale manuellement.

Exemple

Essayez ce code »

  1. <script type = "text / javascript">
  2. $ (document) .ready (fonction () {
  3. $ (". Hide-modal"). Click (function () {
  4. $ ("# myModal"). Modal ('masquer');

5.});

6.});

  1. </ script>

.modal ('handleUpdate')

Cette méthode réajuste la position du modal pour contrer le jerk dû à l’apparition de la barre de défilement de la fenêtre de visualisation au cas où la hauteur du modal change de telle sorte qu’elle devienne supérieure à la hauteur de la fenêtre de visualisation tant qu’elle est ouverte.

Un exemple courant de ce scénario montre les éléments cachés à l'intérieur du modal via JavaScript ou le chargement de contenu à l'intérieur du modal à l'aide d'Ajax après l'activation.

Exemple

Essayez ce code »

  1. <script type = "text / javascript">
  2. $ (document) .ready (fonction () {
  3. $ (". Show-text"). Click (function () {
  4. $ ('# myModal'). Find (". Lots de texte"). Toggle ();
  5. $ ('# myModal'). Modal ('handleUpdate')

6.});

  1. });
  2. </ script>

Événements

La classe modale de Bootstrap comprend peu d’événements permettant de s’intégrer aux fonctionnalités modales.

Description de l'évenement

show.bs.modal Cet événement se déclenche immédiatement lorsque la méthode show instance est appelée.

shown.bs.modal Cet événement est déclenché lorsque le modal a été rendu visible par l'utilisateur. Il attendra que le processus de transition CSS soit complètement terminé avant d'être licencié.

hide.bs.modal Cet événement est déclenché immédiatement lorsque la méthode d'instance de masquage a été appelée.

hidden.bs.modal Cet événement est déclenché lorsque le modal a fini d'être masqué à l'utilisateur. Il attendra que le processus de transition CSS soit complètement terminé avant d'être licencié.

Load.bs.modal Cet événement est déclenché lorsque le modal a chargé du contenu à l'aide de l'option remote.

L'exemple suivant affiche un message d'alerte à l'utilisateur lorsque la transition en fondu en sortie de la fenêtre modale est complètement terminée.

Exemple

Essayez ce code »

  1. <script type = "text / javascript">
  2. $ (document) .ready (fonction () {
  3. $ ("# myModal"). Sur ('hidden.bs.modal', function () {
  4. alert ("La fenêtre modale a été complètement fermée.");

5.});

6.});

  1. </ script>

Conseil: Voir également la section FAQ sur Bootstrap pour plus d'exemples sur les modaux, tels que la définition de l'alignement vertical, la modification de la largeur par défaut, l'intégration de vidéos, etc.

Bootstrap Dropdowns

Dans ce didacticiel, vous apprendrez à ajouter des menus déroulants à divers composants à l’aide du plug-in de menu déroulant Bootstrap.

Création de menus déroulants avec Bootstrap

Le menu déroulant est généralement utilisé dans l'en-tête de navigation pour afficher une liste de liens connexes lorsqu'un utilisateur survole ou clique sur l'élément déclencheur.

Vous pouvez utiliser le plug-in déroulant Bootstrap pour ajouter des menus déroulants (c'est-à-dire ouvrir et fermer d'un clic) à presque tout, tels que des liens, des boutons ou des groupes de boutons, une barre de navigation, des onglets et des pilules, etc. sans même écrire une seule ligne de code JavaScript.

Ajout de listes déroulantes via des attributs de données

Bootstrap fournit un mécanisme simple et élégant pour ajouter le menu déroulant à un élément via des attributs de données. L'exemple suivant vous montrera le balisage minimum requis pour ajouter un menu déroulant au lien hypertexte via des attributs de données.

Exemple

Essayez ce code »

  1. <div class = "dropdown">
  2. <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Liste déroulante <b class = "caret"> </ b> </a>
  3. <ul class = "menu déroulant">
  4. <li> <a href="#"> Action </a> </ li>
  5. <li> <a href="#"> Autre action </a> </ li>
  6. </ ul>
  7. </ div>

L'exemple ci-dessus illustre la forme la plus élémentaire des menus déroulants Bootstrap. Nous allons comprendre chaque partie du composant déroulant Bootstrap une par une.

Explication du code

La liste déroulante Bootstrap comporte essentiellement deux composants: l'élément déclencheur de la liste déroulante, qui peut être un lien hypertexte ou un bouton, et le menu déroulant lui-même.

  • La classe .dropdown spécifie un menu déroulant.
  • La classe .dropdown-toggle définit l'élément déclencheur, qui est un lien hypertexte dans notre cas, alors que l'attribut data-toggle = "dropdown" est requis sur l'élément déclencheur pour basculer le menu déroulant.
  • L'élément .caret à l'intérieur de l'élément d'ancrage du déclencheur crée une petite icône en forme de triangle qui indique que le lien contient un menu déroulant.
  • La liste non ordonnée avec la classe .dropdown-menu construit en fait le menu déroulant qui contient généralement les liens ou les actions associés.

L'exemple de code précédent a un petit problème. Si vous cliquez sur le lien de la liste déroulante, un caractère # sera ajouté à l’URL tout en affichant les listes déroulantes. Si vous souhaitez conserver vos URL intactes, utilisez l'attribut data-target à la place de href = "#", comme ceci:

Exemple

Essayez ce code »

  1. <div class = "dropdown">
  2. <a data-target="#" href="/page.html" data-toggle="dropdown" class="dropdown-toggle"> Liste déroulante <b class = "caret"> </ b> </a>
  3. <ul class = "menu déroulant">
  4. <li> <a href="#"> Action </a> </ li>
  5. <li> <a href="#"> Autre action </a> </ li>
  6. </ ul>
  7. </ div>

De même, vous pouvez ajouter des listes déroulantes aux composants de boutons et de navigation. La section suivante vous montrera quelques implémentations courantes du menu déroulant Bootstrap.

Dropdowns dans une barre de navigation

Les exemples suivants vous montreront comment ajouter des menus déroulants à la barre de navigation.

Exemple

Essayez ce code »

  • <div class = "navbar navbar-static">
  • <div class = "navbar-inner">
  • <a href="#" class="brand"> Marque </a>

<Ul role = "navigation" class = "nav">

  • <li> <a href="#"> Accueil </a> </ li>
  • <li> <a href="#"> Profil </a> </ li>
  • <li class = "dropdown">
  • <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Messages <b class = "caret"> </ b> </a>
  • <ul class = "menu déroulant">
  • <li> <a href="#"> Boîte de réception </a> </ li>
  • <li> <a href="#"> Brouillons </a> </ li>
  • <li> <a href="#"> Éléments envoyés </a> </ li>
  • <li class = "divider"> </ li>
  • <li> <a href="#"> Corbeille </a> </ li>
  • </ ul>
  • </ li>
  • </ ul>
  • <ul class = "nav pull-right">
  • <li class = "dropdown">
  • <a href="#" data-toggle="dropdown" class="dropdown-toggle"> Admin <b class = "caret"> </ b> </a>
  • <ul class = "menu déroulant">
  • <li> <a href="#"> Action </a> </ li>
  • <li> <a href="#"> Autre action </a> </ li>
  • <li class = "divider"> </ li>
  • <li> <a href="#"> Paramètres </a> </ li>
  • </ ul>
  • </ li>
  • </ ul>
  • </ div>
  • </ div>

- La sortie de l'exemple ci-dessus ressemblera à ceci:

Conseil: Vous pouvez tracer une ligne de séparation pour séparer les liens dans un menu déroulant en ajoutant le class .divider à un élément de la liste vide.

Dropdowns dans les Navs

L'exemple suivant vous montrera comment ajouter des listes déroulantes à des listes de médicaments.


2