Bootstrap Modals（模態(tài)框）是使用定制的 Jquery 插件創(chuàng)建的。它可以用來創(chuàng)建模態(tài)窗口豐富用戶體驗，或者為用戶添加實用功能。您可以在 Modals（模態(tài)框）中使用 Popover（彈出框）和 Tooltip（工具提示插件）。
一．什么是模態(tài)窗口？
是這樣一種效果喲：
二． 組成
頭部（包括標題和關閉按鈕）
中間（主要內(nèi)容）
底部（主要是放置操作按鈕）
對應在html代碼中的布局是：使用div容器元素，分別使用modal,modal-dialog,modal-cotent樣式，而在modal-content內(nèi)包含彈窗的header,body,footer,分別使用三個樣式：modal-header,modal-body,modal-footer，如下圖：
三，實現(xiàn)代碼
<style>.modal {//該樣式是做背景容器的，100%充滿全屏，還有當內(nèi)容很多時，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;//背景的裁剪區(qū)域設置從padding區(qū)域向外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區(qū)分}.modal-header .close {//關閉按鈕margin-top: -2px;}.modal-title {margin: 0;line-height: 1.42857143;//頭部內(nèi)部的標題樣式}.modal-body {//中間內(nèi)容區(qū)域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" >單擊彈出模態(tài)窗口</button> --><!-- //觸發(fā)元素（使用聲明式語法）//彈窗主要內(nèi)容 --><!-- //下面寫id的是js使用方法（使用聲明式語法）//彈窗主要內(nèi)容 --><button id="dianji" class="btn btn-success">單擊彈出模態(tài)窗口</button><!-- 彈窗主要內(nèi)容 --><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">×</span> <span class="sr-only">Close</span></button><h2 class="modal-title">登錄系統(tǒng) </h2></div><div class="modal-body"><p>彈窗里的具體內(nèi)容,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");});})
四。Js 中的使用：
（1）聲明式語法
data-toggle,data-target,給觸發(fā)元素上設置，data-toggle的值必須為modal ，dat-target的值是：css選擇符
（2）javascript用法：
1）使用屬性控制：backdrop 布爾值 值為true,則單擊背景（不包括彈窗本身）時，關閉彈窗，否則，反之。
keyboard 布爾值 值為true,則按esc時，關閉彈窗，否則反之。$("#dianjiji").modal({backdrop:true,keyboard:false,show:true;})2）使用參數(shù)控制：toggle $(“#mymodal”).modal(“toggle”)，觸發(fā)時，反彈窗口的狀態(tài)，
Show $(“#mymodal”).modal(“show”),觸發(fā)時，顯示彈窗
Hide $(“#mymodal”).modal(“hide”),觸發(fā)時，關閉
3）使用方法控制：
Show.bs.modal 在show方法調(diào)用時立即觸發(fā)Shown.bs.modal 該事件在模態(tài)彈窗完全顯示給用戶之后，觸發(fā)Hide.bs.modal 在hide方法調(diào)用時，立即觸發(fā)Hiden.bs.modal 該事件在模態(tài)彈窗隱藏之后觸發(fā)使用方法$(“#mymodal”).on(‘方法名',function(e){//處理代碼。。。})關于Boostrap模態(tài)窗口的學習小結，小編就給大家介紹到這里，希望對大家有所幫助！
新聞熱點
疑難解答
