Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer: 2016-05-16 15:28:34
original
1340 Les gens l'ont consulté

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 -->
Copier après la connexion

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>
Copier après la connexion

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 -->
Copier après la connexion

JS :

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });
Copier après la connexion

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
 });
 });
});
Copier après la connexion

Paramètres :

Paramètres de l'événement :

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})
Copier après la connexion

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>
Copier après la connexion

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

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>
Copier après la connexion

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.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal