Analyse complète de la méthode de mise en œuvre des compétences Bootstrap pop-up window_javascript

1. Analyse structurelle

Les boîtes pop-up modales du framework Bootstrap utilisent respectivement les styles "modal", "modal-dialog" et "modal-content", et le contenu réel de la fenêtre pop-up est placé dans "modal-content ". Son principal Il comprend également trois parties :

　☑ L'en-tête de la pop-up box, généralement représenté par "modal-header", comprend principalement le titre et le bouton de fermeture

　☑ Le corps de la pop-up box, généralement représenté par "modal-body", le contenu principal de la pop-up box

　☑ Le pied de la pop-up box, généralement représenté par "modal-footer", place principalement les boutons de fonctionnement

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

2. La classe data-toggle déclenche la fenêtre pop-up (pas besoin d'écrire du JS)

1. Déclaration de la fenêtre contextuelle modale , il suffit de personnaliser deux attributs nécessaires : data-toggle et data-target.

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div>
 </div>
</div>

2. Description des paramètres de données

En plus de contrôler les fenêtres contextuelles modales via data-toggle et data-target, le framework Bootstrap fournit également d'autres attributs de données personnalisés pour les boîtes contextuelles modales afin de contrôler les fenêtres contextuelles modales.

3. Fenêtre pop-up du déclencheur JS (JS doit être écrit)

　1. En plus d'utiliser des attributs personnalisés pour déclencher des fenêtres contextuelles modales, vous pouvez également déclencher des fenêtres contextuelles modales via des méthodes JavaScript. Déclenché en donnant un événement à un élément. Par exemple, attribuez à un bouton un événement de clic, puis déclenchez une fenêtre contextuelle modale.

HTML :

点击我
<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

JS :

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });

2. Lors de l'utilisation de JavaScript pour déclencher une fenêtre contextuelle modale, le framework Bootstrap fournit certains paramètres, notamment

Paramètres de propriété :

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
  keyboard:false
 });
 });
});

Paramètres :

Paramètres de l'événement :

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})

4. Taille de la fenêtre contextuelle

Le framework Bootstrap propose également différentes tailles pour les popups modaux.

L'un est le style grande taille "modal-lg".

<divclass="modal-dialog modal-lg">
 <divclass="modal-content"> ... </div>
</div>

L'autre est le style petite taille "modal-sm".

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>

Ce qui précède est une introduction complète à la méthode d'implémentation de la fenêtre contextuelle Bootstrap. J'espère que cela sera utile à l'apprentissage de chacun.