Dans cette leçon, nous découvrirons principalement le plug-in de boîte modale dans Bootstrap, qui est un plug-in de fonction pop-up très courant pour les sites Web interactifs.
1. Utilisation de base
L'utilisation d'un composant contextuel de boîte modale nécessite trois couches d'éléments de conteneur div, à savoir modal (couche de déclaration modale),
dialogue (couche de déclaration de fenêtre), contenu (couche de contenu). Au sein de la couche de contenu, il y a trois couches, à savoir l'en-tête, le corps et le pied de page.
//Exemple de base
<!-- 模态声明,show 表示显示 --> <div class="modal show" tabindex="-1"> <!-- 窗口声明 --> <div class="modal-dialog"> <!-- 内容声明 --> <div class="modal-content"> <!-- 头部 --> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span>×</span> </button> <h4 class="modal-title">会员登录</h4> </div> <!-- 主体 --> <div class="modal-body"> <p> 暂时无法登录会员 </p> </div> <!-- 注脚 --> <div class="modal-footer"> <button type="button" class="btn btn-default"> 注册 </button> <button type="button" class="btn btn-primary"> 登录 </button> </div> </div> </div> </div>
Si vous souhaitez que la boîte modale se cache automatiquement puis fasse apparaître la fenêtre en cliquant sur le bouton, vous devez procéder comme suit.
//模态框去掉 show,增加一个 id <div class="modal" id="myModal"> //点击触发模态框显示 <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 点击弹窗 </button> //弹窗的大小有三种,默认情况下是正常,还有 lg(大)和 sm(小) <div class="modal-dialog modal-lg"> <div class="modal-dialog sm-lg"> //可设置淡入淡出效果 <div class="modal fade" id="myModal"> //在主体部分使用栅格系统中的流体 <!-- 主体 --> <div class="modal-body"> <div class="container-fluid"> <div class="row"> <div class="col-md-4"> 1 </div> <div class="col-md-4"> 1 </div> <div class="col-md-4"> 1 </div> </div> </div> </div>
2. Mode d'emploi
Après l’introduction à l’utilisation de base, examinons les différentes utilisations importantes du plug-in. Tous les plug-ins sont basés sur JavaScript/jQuery. Ensuite, il y a quatre éléments : l’utilisation, les paramètres, les méthodes et les événements.
1.Utilisation
Le premier type : Vous pouvez transmettre l'attribut data
//data-toggle data-toggle="modal" data-target="#myModal"
la bascule de données indique le type de déclencheur
data-target représente le nœud déclenché
Si au lieu d'utiliser
Remplacer. Bien entendu, nous vous recommandons d’utiliser data-target. En plus des deux attributs déclarés data-toggle et data-target, certaines options sont disponibles.
2. Paramètres
L'effet peut être contrôlé en définissant la déclaration de l'attribut data-* sur l'élément HTML.
//空白背景且点击不关闭 data-backdrop="false" //按下 esc 不关闭 data-keyboard="false" //初始化隐藏,如果是按钮点击触发,第一次点击则无法显示,第二次显示。 data-show="false" //加载一次 index.html 到容器内 href="index.html"
Bien sûr, il peut également être défini directement en JavaScript.
//通过 jQuery 方式声明 $('#myModal').modal({ show : true, backdrop : false, keyboard : false, remote : 'index.html', });
3. Méthode
Si la fenêtre pop-up ne s'affiche pas par défaut, alors comment la fenêtre pop-up peut-elle être affichée en cliquant avant et après ?
//点击显示弹窗 $('#btn').on('click', function() { $('#myModal').modal('show'); });
4. Événement
La boîte modale prend en charge 4 types de temps, correspondant à avant l'apparition, après l'apparition, avant la fermeture et après la fermeture.
$('#myModal').on('show.bs.modal', function() { alert('在 show 方法调用时立即触发!'); }); $('#myModal').on('shown.bs.modal', function() { alert('在模态框显示完毕后触发!'); }); $('#myModal').on('hide.bs.modal', function() { alert('在 hide 方法调用时立即触发!'); }); $('#myModal').on('hiden.bs.modal', function() { alert('在模态框显示完毕后触发!'); }); $('#myModal').on('loaded.bs.modal', function() { alert('远程数据加载完毕后触发!'); });
Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.