Résumé d'apprentissage des compétences modales window_javascript de Boostrap-js tutoriel-php.cn

Résumé d'apprentissage des compétences modales window_javascript de Boostrap

WBOY

Libérer： 2016-05-16 15:07:39

original

1255 Les gens l'ont consulté

Les modaux Bootstrap sont créés à l'aide de plugins Jquery personnalisés. Il peut être utilisé pour créer des fenêtres modales pour enrichir l'expérience utilisateur ou pour ajouter des fonctions pratiques aux utilisateurs. Vous pouvez utiliser des popovers et des info-bulles dans Modals.

1. Qu'est-ce qu'une fenêtre modale ?

Voici l'effet :

2. Composition

En-tête (y compris le titre et le bouton de fermeture)

Milieu (contenu principal)

En bas (principalement pour placer les boutons de commande)

La disposition correspondante dans le code html est la suivante : utilisez l'élément conteneur div, utilisez respectivement les styles modal, modal-dialog et modal-cotent, et utilisez trois en-tête, corps et pied de page de la fenêtre contextuelle dans le contenu modal Style : en-tête modal, corps modal, pied de page modal, comme indiqué ci-dessous :

3. Code d'implémentation

<style>
.modal {//该样式是做背景容器的，100%充满全屏，还有当内容很多时，k可以在modal里进行滚动操作
position: fixed;//固定布局的
top: 0;
right: 0; //设置上下左右都为0，表示充满全屏
bottom: 0;
left: 0;
z-index: 1050;//提升z-index，防止其他元素溢出
display: none;//默认不显示
overflow: hidden;
-webkit-overflow-scrolling: touch;//支持移动设备上，触摸进行移动
outline: 0;//消除虚边框
}
.modal-dialog {
position: relative;//相对与Modal元素，进行相对定位
width: auto;//宽度自适应
margin: 10px;//外边距10像素
}
.modal-content {主要对弹窗进行边框，边距，背景色，阴影的处理
position: relative;//
background-color: #fff;
-webkit-background-clip: padding-box;//背景的裁剪区域设置从padding区域向外
background-clip: padding-box;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, .2);//透明度设置
border-radius: 6px;
outline: 0;//取消轮廓显示
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
}
.modal-header {//弹窗的头部设置
min-height: 16.42857143px;//最小高度设置
padding: 15px;
border-bottom: 1px solid #e5e5e5;//底部设细线，与modal-body区分
}
.modal-header .close {//关闭按钮
margin-top: -2px;
}
.modal-title {
margin: 0;
line-height: 1.42857143;//头部内部的标题样式
}
.modal-body {//中间内容区域
position: relative;
padding: 15px;
}
.modal-footer {//底部设置
padding: 15px;
text-align: right;//居右对齐，一般都是按钮
border-top: 1px solid #e5e5e5;
}
</style>
<body>
<!-- <button data-toggle="modal" data-target="#popucss" class="btn btn-success" >单击弹出模态窗口</button> --><!-- //触发元素（使用声明式语法）
//弹窗主要内容 --><!-- //下面写id的是js使用方法（使用声明式语法）
//弹窗主要内容 -->
<button id="dianji" class="btn btn-success">单击弹出模态窗口</button>
<!-- 弹窗主要内容 -->
<div class="modal" id="dianjiji"><!-- 第一部分 -->
<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>
<h2 class="modal-title">登录系统 </h2>
</div>
<div class="modal-body">
<p>弹窗里的具体内容,hhh ajbh </p>
</div>
<div class="modal-footer"> 
<button type="button" 
id="login" class="btn btn-success ">登录</button>
<button type="button" 
id="login" class="btn btn-success ">取消</button>
</div>
</div>
</div>
</div>
<script src="./bootstrap-3.3.5/dist/js/jquery.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/bootstrap.min.js"></script>
<script src="./bootstrap-3.3.5/dist/js/modal.js"></script>
<script>
$(function() {
$("#dianji").click(function() {
$("#dianjiji").modal("show");
});
})

Copier après la connexion

Quatre. Utilisation en Js :

(1) Syntaxe déclarative

data-toggle, data-target, défini sur l'élément déclencheur, la valeur de data-toggle doit être modale, la valeur de dat-target est : sélecteur css

(2) utilisation de javascript :

1) Utiliser le contrôle d'attribut : background La valeur booléenne est vraie, puis lorsque l'on clique sur l'arrière-plan (à l'exclusion de la fenêtre pop-up elle-même), la fenêtre pop-up sera fermée, sinon, vice versa.

keyboard 布尔值 值为true,则按esc时，关闭弹窗，否则反之。
$("#dianjiji").modal({
backdrop:true,
keyboard:false,
show:true;
})

Copier après la connexion

2) Utiliser le contrôle des paramètres : basculer $("#mymodal").modal("toggle"), une fois déclenché, l'état de la fenêtre de rebond sera déclenché,

Show $("#mymodal").modal("show"), lorsqu'il est déclenché, affiche la fenêtre pop-up
Masquer $("#mymodal").modal("hide"), une fois déclenché, fermer

3) Contrôle d'utilisation :

Show.bs.modal 在show方法调用时立即触发
Shown.bs.modal 该事件在模态弹窗完全显示给用户之后，触发
Hide.bs.modal 在hide方法调用时，立即触发
Hiden.bs.modal 该事件在模态弹窗隐藏之后触发
使用方法
$(“#mymodal”).on(‘方法名',function(e){
//处理代码。。。
})

Copier après la connexion

À propos du résumé d'apprentissage de la fenêtre modale Boostrap, l'éditeur vous le présentera ici, j'espère qu'il vous sera utile !