English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Modal est essentiellement un dialogue ou une fenêtre pop-up, utilisé pour fournir des informations importantes aux utilisateurs ou pour les exhorter à entreprendre des actions nécessaires avant de continuer. Les modèles sont largement utilisés pour avertir les utilisateurs d'une expiration de session, ou pour obtenir leur confirmation finale avant d'effectuer toute action clé (par exemple, sauvegarder ou supprimer des données importantes).
Vous pouvez créer des dialogues intelligents et flexibles en utilisant l'extension de modalité Bootstrap.
La boîte de dialogue (Modal) est une fenêtre enfichable sur le parent. Souvent, l'objectif est d'afficher du contenu provenant d'une source distincte, permettant une certaine interaction sans quitter le parent. La fenêtre enfichable peut fournir des informations et des interactions.
Le exemple suivant décrit la structure de base d'un modèle simple avec un titre, un texte du corps du message et un pied de page contenant des boutons d'action de l'utilisateur. Le modèle suivant crée un effet de boîte de dialogue simple :
!DOCTYPE html> <html> <head> <title>Exemple Bootstrap </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Exemple de boîte de dialogue</h2> !-- Bouton : utilisé pour ouvrir la boîte de dialogue --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Ouvrir le boîte de dialogue </button> !-- Boîte de dialogue modale --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> !-- En-tête de la boîte de dialogue modale --> <div class="modal-header"> <h4 class="modal-title">En-tête de la boîte de dialogue modale</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> !-- Corps de la boîte de dialogue modale --> <div class="modal-body> Contenu de la boîte de dialogue modale.. </div> !-- Bas de la boîte de dialogue modale --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> </div> </body> </html>Voyons le test ‹/›
Effet après exécution如下:
Nous pouvons ajouter .modal-sm La classe pour créer une petite boîte de dialogue, .modal-lg peut créer une grande boîte de dialogue.
Les classes de taille sont placées dans la .modal du-Après la classe dialog :
!DOCTYPE html> <html> <head> <title>Exemple Bootstrap </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Exemple de boîte de dialogue</h2> !-- Bouton : utilisé pour ouvrir la boîte de dialogue --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Ouvrir le boîte de dialogue </button> !-- Boîte de dialogue modale --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> !-- En-tête de la boîte de dialogue modale --> <div class="modal-header"> <h4 class="modal-title">En-tête de la boîte de dialogue modale</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> !-- Corps de la boîte de dialogue modale --> <div class="modal-body> Contenu de la boîte de dialogue modale.. </div> !-- Bas de la boîte de dialogue modale --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> </div> </body> </html>Voyons le test ‹/›
Effet après exécution如下:
!DOCTYPE html> <html> <head> <title>Exemple Bootstrap </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Exemple de boîte de dialogue</h2> !-- Bouton : utilisé pour ouvrir la boîte de dialogue --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> Ouvrir le boîte de dialogue </button> !-- Boîte de dialogue modale --> <div class="modal fade" id="myModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> !-- En-tête de la boîte de dialogue modale --> <div class="modal-header"> <h4 class="modal-title">En-tête de la boîte de dialogue modale</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> !-- Corps de la boîte de dialogue modale --> <div class="modal-body> Contenu de la boîte de dialogue modale.. </div> !-- Bas de la boîte de dialogue modale --> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> </div> </div> </div> </div> </div> </body> </html>Voyons le test ‹/›
Effet après exécution如下: