Boîte modale Bootstrap
Bootstrap Plug-in Modal
Modal est un formulaire enfant qui couvre le formulaire parent. En règle générale, le but est d'afficher du contenu provenant d'une source distincte pouvant avoir une certaine interaction sans quitter le formulaire parent. Les sous-formulaires fournissent des informations, des interactions et bien plus encore.
Si vous souhaitez référencer les fonctionnalités du plugin séparément, vous devez alors référencer modal.js. Alternativement, comme mentionné dans le chapitre Présentation du plugin Bootstrap, vous pouvez référencer bootstrap.js ou la version minifiée de bootstrap.min.js.
Utilisation
Vous pouvez changer le contenu caché du plug-in modal :
via l'attribut data : in Définissez l'attribut data-toggle="modal" sur l'élément du contrôleur (comme un bouton ou un lien), et définissez également data-target="#identifier" ou href="# identifier" pour spécifier la boîte modale spécifique à changer (avec id="identifier").
Via JavaScript : Grâce à cette technique, vous pouvez appeler un modal avec id="identifier" avec une simple ligne de JavaScript :
$('#identifier').modal(options)
Instance
Une instance de fenêtre modale statique, comme indiqué dans l'exemple suivant :
Instance
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态框（Modal）插件</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <h2>创建模态框（Modal）</h2> <!-- 按钮触发模态框 --> <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 开始演示模态框 </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"> 模态框（Modal）标题 </h4> </div> <div class="modal-body"> 在这里添加一些文本 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary"> 提交更改 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Le résultat est le suivant :
Explication du code :
Pour utiliser une fenêtre modale, vous devez disposer d'une sorte de déclencheur. Vous pouvez utiliser des boutons ou des liens. Ici, nous utilisons des boutons.
Si vous regardez attentivement le code ci-dessus, vous constaterez que dans la balise <button>, data-target="#myModal" est l'endroit où vous vouloir La cible du modal chargé sur la page. Vous pouvez créer plusieurs modaux sur la page, puis créer différents déclencheurs pour chaque modal. Bien évidemment, vous ne pouvez pas charger plusieurs modules en même temps, mais vous pouvez créer plusieurs modules sur la page qui se chargent à des moments différents.
Vous devez faire attention à deux points dans la case modale :
Le premier est .modal, utilisez Pour identifier le contenu de <div> comme boîte modale.
La seconde est la classe .fade. Lorsque le modal est basculé, le contenu apparaît et disparaît en fondu.
aria-labelledby="myModalLabel", cet attribut fait référence au titre de la boîte modale.
L'attribut aria-hidden="true" est utilisé pour garder la fenêtre modale invisible jusqu'à ce que le déclencheur soit déclenché (par exemple en cliquant sur le bouton correspondant).
<div class="modal-header">, modal-header est une classe qui définit le style de l'en-tête d'une fenêtre modale.
class="close", close est une classe CSS utilisée pour styliser le bouton de fermeture d'une fenêtre modale.
data-dismiss="modal" est un attribut de données HTML5 personnalisé. Ici, il est utilisé pour fermer la fenêtre modale.
class="modal-body", est une classe CSS de Bootstrap CSS, utilisée pour définir les styles pour le corps des fenêtres modales.
class="modal-footer", est une classe CSS de Bootstrap CSS, utilisée pour styliser le bas des fenêtres modales.
data-toggle="modal", l'attribut de données personnalisé HTML5 data-toggle est utilisé pour ouvrir une fenêtre modale.
Options
Certaines options peuvent être utilisées pour personnaliser l'apparence de la fenêtre modale (Fenêtre modale). Elles sont transmises via l'attribut data ou). JavaScript. Les options sont répertoriées dans le tableau ci-dessous :
| 选项名称 | 类型/默认值 | Data 属性名称 | 描述 |
|---|---|---|---|
| backdrop | boolean 或 string 'static' 默认值：true | data-backdrop | 指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。 |
| keyboard | boolean 默认值：true | data-keyboard | 当按下 escape 键时关闭模态框，设置为 false 时则按键无效。 |
| show | boolean 默认值：true | data-show | 当初始化时显示模态框。 |
| remote | path 默认值：false | data-remote | 使用 jQuery .load 方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示：<a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a> |
Méthodes
Voici quelques méthodes utiles qui peuvent être utilisées avec modal().
| 方法 | 描述 | 实例 |
|---|---|---|
| Options: .modal(options) | 把内容作为模态框激活。接受一个可选的选项对象。 | $('#identifier').modal({
keyboard: false
}) |
| Toggle: .modal('toggle') | 手动切换模态框。 | $('#identifier').modal('toggle') |
| Show: .modal('show') | 手动打开模态框。 | $('#identifier').modal('show') |
| Hide: .modal('hide') | 手动隐藏模态框。 | $('#identifier').modal('hide') |
Instance
L'exemple suivant démontre l'utilisation de la méthode :
Instance
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框（Modal）插件方法</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>模态框（Modal）插件方法</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</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">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
按下 ESC 按钮退出。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<script>
$(function () { $('#myModal').modal({
keyboard: true
})});
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour visualiser l'instance en ligne
Le résultat est le suivant :
Seulement requis Cliquez sur la touche ESC et la fenêtre modale se fermera.
Événements
Le tableau suivant répertorie les événements utilisés dans les boîtes modales. Ces événements peuvent être utilisés comme hooks dans les fonctions.
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.modal | 在调用 show 方法后触发。 | $('#identifier').on('show.bs.modal', function () {
// 执行一些动作...
}) |
| shown.bs.modal | 当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。 | $('#identifier').on('shown.bs.modal', function () {
// 执行一些动作...
}) |
| hide.bs.modal | 当调用 hide 实例方法时触发。 | $('#identifier').on('hide.bs.modal', function () {
// 执行一些动作...
}) |
| hidden.bs.modal | 当模态框完全对用户隐藏时触发。 | $('#identifier').on('hidden.bs.modal', function () {
// 执行一些动作...
}) |
Exemple
L'exemple suivant illustre l'utilisation des événements :
Instance
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 模态框（Modal）插件事件</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
</head>
<body>
<h2>模态框（Modal）插件事件</h2>
<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</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">
模态框（Modal）标题
</h4>
</div>
<div class="modal-body">
点击关闭按钮检查事件功能。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</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('嘿，我听说您喜欢模态框...');})
});
</script>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Le résultat est le suivant :
Comme indiqué dans le Dans l'exemple ci-dessus, si vous cliquez sur le bouton Fermer, c'est-à-dire l'événement masquer, un message d'avertissement s'affichera.
