boîte modale Bootstrap (Modal) un widget
Modal Box (Modal) est superposée sur le formulaire parent subform. En général, le but est de montrer le contenu à partir d'une source unique, et peut avoir une certaine interaction sans quitter le formulaire parent. Subform peut fournir des informations, l'interaction et ainsi de suite.
Si vous voulez faire référence à des caractéristiques individuelles de plug-in, vous devez référencermodal.js.Ou, comme Bootstrap plug - in Présentation du chapitre mentionné, vous pouvez vous référer àbootstrap.jsou version compressée debootstrap.min.js.
usage
Vous pouvez changer le contenu caché de la boîte modale (Modal) plug-in:
- Grâce à des données attributs:définir les propriétés dedonnées-toggle = "modal"dans les éléments de commande (tels que des boutons ou des liens), et réglez lesdonnées-target = "# identifier"ouhref = "# identifiant"pour attribuer un mode spécifique pour être commuté boîte d'état (avec id = "identifier").
- En JavaScript: En utilisant cette technique, vous pouvez par une simple ligne de JavaScript pour appeler la boîte modale avec id = "identifiant" de:
$ ( '# Identifier'). Modales (options)
Exemples
Un exemple de fenêtre modale statique, comme illustré dans les exemples suivants:
Exemples
Essayez »
Les résultats sont les suivants:
Code de l' explication:- fenêtre Modal, vous devez avoir une sorte de déclencheur. Vous pouvez utiliser les boutons ou liens. Ici, nous utilisons un bouton.
- Si vous regardez attentivement le code ci - dessus, vous trouverez dans labalise <button>, data-target = "# myModal " est l'objectif que vous voulez charger sur une boîte page modale.Vous pouvez créer la boîte modale multiple sur la page, puis créer différents déclencheurs pour chacun de la boîte modale. Maintenant, évidemment, vous ne pouvez pas charger plusieurs modules en même temps, mais vous pouvez créer le chargement multiple à différents moments de la page.
- Modal box Deux choses à noter:
- La première est.modal, pour le <div> reconnaître le contenu de la boîte modale.
- La seconde est.fade classe.Lorsque la boîte modale est en marche, il provoquera le contenu se fanent.
- aria-labelledby = "myModalLabel", les références d'attribut modal titre de la boîte.
- Propriétéaria-hidden = "true" pour la tenue d' une fenêtre modale est pas visible jusqu'à ce que le déclencheur est tiré vers le haut (comme cliquer sur le bouton correspondant).
- style de tête <class Div = "modal-tête">, modal-tête est défini classe de fenêtre modale.
- class = "close", à proximitéest une classe CSS, fenêtre modale est utilisée pour définir le style du bouton Fermer.
- données rejeter = "modale", attribut de données HTML5 est une coutume.Lorsqu'il est utilisé pour fermer la fenêtre modale.
- class = "modal-corps», est une classe CSS CSS Bootstrap pour le style défini comme la fenêtre modale principale.
- class = "modal-footer", est une classe CSS CSS Bootstrap pour le style de la partie inférieure de la fenêtre modale.
- données-toggle = "modal", HTML5 données personnalisées des données d' attribut-bascule pour ouvrir la fenêtre modale.
options de
Il y a quelques options qui peuvent être utilisés pour personnaliser la fenêtre modale (Modal Window) look and feel, qui sont obtenus par les attributs de données ou JavaScript pour passer. Le tableau suivant présente les options suivantes:
选项名称 | 类型/默认值 | 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> |
manière
Voici quelques méthodes utiles et modale () utilisés ensemble.
方法 | 描述 | 实例 |
---|---|---|
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') |
Exemples
L'exemple suivant illustre la méthode:
Exemples
Essayez »
Les résultats sont les suivants:
Cliquez simplement sur la touche ESC, fenêtre modale est quitté.
événement
Le tableau suivant présente l'événement à utiliser la boîte modale. Ces événements peuvent être utilisés lorsque la fonction de crochet.
事件 | 描述 | 实例 |
---|---|---|
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 () { // 执行一些动作... }) |
Exemples
L'exemple suivant illustre l'utilisation de l'événement:
Exemples
Essayez »
Les résultats sont les suivants:
Comme le montre l'exemple ci - dessus, si vous cliquez sur le boutonfermer,cacher l' événement, un message d'avertissement est affiché.