Ringkasan pembelajaran kemahiran Boostrap modal window

Ringkasan pembelajaran kemahiran Boostrap modal window_javascript

WBOY

Lepaskan： 2016-05-16 15:07:39

asal

1278 orang telah melayarinya

Modals Bootstrap dicipta menggunakan pemalam Jquery tersuai. Ia boleh digunakan untuk mencipta tetingkap modal untuk memperkayakan pengalaman pengguna, atau untuk menambah fungsi praktikal kepada pengguna. Anda boleh menggunakan Popovers dan Tooltips dengan Modals.

1. Apakah tetingkap modal?

Ini adalah kesannya:

2. Komposisi

Pengepala (termasuk tajuk dan butang tutup)

Tengah (kandungan utama)

Bawah (terutamanya untuk meletakkan butang operasi)

Susun atur yang sepadan dalam kod html ialah: gunakan elemen bekas div, gunakan gaya modal, dialog modal, dan modal-koten masing-masing dan gunakan tiga pengepala, badan dan pengaki tetingkap timbul dalam modal-content. Style: modal-header, modal-body, modal-footer, seperti yang ditunjukkan di bawah:

3. Kod pelaksanaan

<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");
});
})

Salin selepas log masuk

Empat. Penggunaan dalam Js:

(1) Sintaks perisytiharan

togol data, sasaran data, ditetapkan pada elemen pencetus, nilai togol data mestilah modal, nilai sasaran-dat ialah: pemilih css

(2) penggunaan javascript:

1) Gunakan kawalan atribut: nilai Boolean latar belakang adalah benar, kemudian apabila latar belakang (tidak termasuk tetingkap timbul itu sendiri) diklik, tetingkap timbul akan ditutup, sebaliknya, sebaliknya.

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

Salin selepas log masuk

2) Gunakan kawalan parameter: togol $("#mymodal").modal("togol"), apabila dicetuskan, status tetingkap lantunan akan dicetuskan,

Tunjukkan $(“#mymodal”).modal(“show”), apabila dicetuskan, memaparkan tetingkap timbul
Sembunyikan $("#mymodal").modal("hide"), apabila dicetuskan, tutup

3) Kawalan penggunaan:

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

Salin selepas log masuk

Mengenai ringkasan pembelajaran tetingkap modal Boostrap, editor akan memperkenalkannya kepada anda di sini, saya harap ia akan membantu anda!