Latest web development tutorials

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

<H2> créer boîte modale (Modal) </ h2> <! - Bouton pour déclencher la boîte modale -> <Bouton class = "btn btn-primaire btn -lg" données-toggle = "modal" data-target = "#myModal"> de cadre modal Démarrer Démo </ button> <! - Boîte de Modal (Modal) -> <Div class = "fade modal" id = "myModal" tabindex = "-1" role = "dialogue" aria-labelledby = "myModalLabel" aria-hidden = "true"> <Div class = "modal-dialogue"> <Div class = "modal content"> <Div class = "modal-tête"> <Bouton type = "button" class = "close" données rejeter = "modal" aria-hidden = "true"> & fois; </ button> <H4 class = "-titre modal" id = "myModalLabel"> boîte modale (Modal) Titre </ h4> </ Div> <Div class = "modal corps"> ajouter un peu de texte ici </ div> <Div class = "modal-footer"> <Bouton type = "button" class = "btn btn-default" données rejeter = "modal"> Fermer </ button> <Bouton type = "button" class = "btn-primaire btn" > Valider les modifications </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal -> </ Div>

Essayez »

Les résultats sont les suivants:

Modal Box (Modal) un widget
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:
    1. La première est.modal, pour le <div> reconnaître le contenu de la boîte modale.
    2. 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 属性名称描述
backdropboolean 或 string 'static'
默认值:true
data-backdrop指定一个静态的背景,当用户点击模态框外部时不会关闭模态框。
keyboardboolean
默认值:true
data-keyboard当按下 escape 键时关闭模态框,设置为 false 时则按键无效。
showboolean
默认值:true
data-show当初始化时显示模态框。
remotepath
默认值: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

<! - Boîte de Modal (Modal) -> <Div class = "fade modal" id = "myModal" tabindex = "-1" role = "dialogue" aria-labelledby = "myModalLabel" aria-hidden = "true"> <Div class = "modal-dialogue"> <Div class = "modal content"> <Div class = "modal-tête"> <Bouton type = "button" class = "close" données rejeter = "modal" aria-hidden = "true"> × </ button> <H4 class = "-titre modal" id = "myModalLabel"> boîte modale (Modal) Titre </ h4> </ Div> <Div class = "modal-body"> Appuyez sur la touche ESC pour quitter. </ Div> <Div class = "modal-footer"> <Bouton type = "button" class = "btn btn-default" données rejeter = "modal"> Fermer </ button> <Bouton type = "button" class = "btn-primaire btn" > Valider les modifications </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal-dialog -> </ Div> <! - /.modal -> <Script> $ (function () {$ ( '# myModal') modal ({clavier :. true})}); </ script>

Essayez »

Les résultats sont les suivants:

Modal Box (Modal) méthode plug-in

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

<! - Boîte de Modal (Modal) -> <H2> boîte modale (Modal) Plug-in événement </ h2> <! - Bouton pour déclencher la boîte modale -> <Bouton class = "btn btn-primaire btn -lg" données-toggle = "modal" data-target = "#myModal"> de cadre modal Démarrer Démo </ button> <! - Boîte de Modal (Modal) -> <Div class = "fade modal" id = "myModal" tabindex = "-1" role = "dialogue" aria-labelledby = "myModalLabel" aria-hidden = "true"> <Div class = "modal-dialogue"> <Div class = "modal content"> <Div class = "modal-tête"> <Bouton type = "button" class = "close" données rejeter = "modal" aria-hidden = "true"> × </ button> <H4 class = "-titre modal" id = "myModalLabel"> boîte modale (Modal) Titre </ h4> </ Div> <Div class = "modal-body"> Cliquez sur le bouton Fermer pour vérifier la fonction d'événement. </ Div> <Div class = "modal-footer"> <Bouton type = "button" class = "btn btn-default" données rejeter = "modal"> Fermer </ button> <Bouton type = "button" class = "btn-primaire btn" > Valider les modifications </ button> </ Div> </ Div> <! - /.modal-content -> </ Div> <! - /.modal-dialog -> </ Div> <! - /.modal -> <Script> $}) (fonction () {$ ( '# myModal') modale ( «cacher»)});. </ Script> <Script> $ (function () {$ ( '# myModal') sur ( 'hide.bs.modal', function () {alert ( ' Hey, je vous ai entendu comme la boîte modale ...'); })}); </ script >

Essayez »

Les résultats sont les suivants:

Modal Box (Modal) Plug-in Event

Comme le montre l'exemple ci - dessus, si vous cliquez sur le boutonfermer,cacher l' événement, un message d'avertissement est affiché.