使用jQuery和Bootstrap實現(xiàn)多層、自適應模態(tài)窗口
更新時間：2014年12月22日 14:35:04 投稿：hebedich
這篇文章主要介紹了使用jQuery和Bootstrap實現(xiàn)多層、自適應模態(tài)窗口,需要的朋友可以參考下
本篇實踐一個多層模態(tài)窗口，而且是自適應的。
點擊頁面上的一個按鈕，彈出第一層自適應模態(tài)窗口。
在第一層模態(tài)窗口內(nèi)包含一個按鈕，點擊該按鈕彈出第二層模態(tài)窗口，彈出的第二層模態(tài)窗口會擋住第一層模態(tài)窗口，即第二層模態(tài)窗口打開的時候，無法關(guān)閉第一層模態(tài)窗口。
具體頁面實現(xiàn)部分如下：
復制代碼 代碼如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<style type="text/css">
.modal-open,
.modal-open .navbar-fixed-top,
.modal-open .navbar-fixed-bottom {
margin-right: 0;
}
.modal {
bottom: auto;
padding: 0;
background-color: #ffffff;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 6px;
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
background-clip: padding-box;
overflow-y: auto;
}
.modal.container {
max-width: none;
}
#firstmodal {
width: 98%;
height: 98%;
}
#secondmodal {
width: 99%;
height: 99%;
}
</style>
<script type="text/javascript">
$(function() {
$('#m1').on("click", function() {
$('#firstmodal').modal();
});
$('#m2').on("click", function () {
$('#secondmodal').modal();
});
});
</script>
</head>
<body>
<div class="content" style="margin-left: 100px;margin-top: 100px;">
<button class="btn btn-primary btn-lg" id="m1">打開第一層模態(tài)窗口</button>
</div>
<div id="firstmodal" class="modal container fade" tabindex="-1" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">第一層模態(tài)窗口</h4>
</div>
<div class="modal-body">
<p>
<button class="btn btn-primary btn-lg" id="m2">打開第二層模態(tài)窗口</button>
第一層主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
第一層主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
第一層主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
</p>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" data-dismiss="modal" class="btn btn-default">關(guān)閉</button>
</div>
</div>
<div id="secondmodal" class="modal container fade" tabindex="-1" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">第二層模態(tài)窗口</h4>
</div>
<div class="modal-body">
<p>
第二層主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容主體內(nèi)容
</p>
</div>
<div class="modal-footer" style="text-align: center;">
<button type="button" data-dismiss="modal" class="btn btn-default">關(guān)閉</button>
</div>
</div>
</body>
以上就是jQuery和Bootstrap實現(xiàn)多層、自適應模態(tài)窗口的全部內(nèi)容了，非常的不錯，而且很實用，直接就可以使用到項目中去。
相關(guān)文章
隨著頁面扁平化的普及，越來越多的網(wǎng)站都開始使用響應式布局，作為一個優(yōu)秀的前端工作者，必須要精通的，這里給大家推薦一款響應式布局的jQuery插件。2014-11-11
jQuery旋轉(zhuǎn)插件—rotate支持(ie/Firefox/SafariOpera/Chrome)
網(wǎng)上發(fā)現(xiàn)一個很有意思的jQuery旋轉(zhuǎn)插件，支持Internet Explorer 6.0+ 、Firefox 2.0 、Safari 3 、Opera 9 、Google Chrome，高級瀏覽器下使用Transform，低版本ie使用VML實現(xiàn),感興趣的朋友可以了解下2013-01-01
jquery、js調(diào)用iframe父窗口與子窗口元素的方法整理
本節(jié)主要介紹了jquery、js調(diào)用iframe父窗口與子窗口元素的方法,需要的朋友可以參考下2014-07-07
jQuery判斷元素是否顯示 是否隱藏的簡單實現(xiàn)代碼
下面小編就為大家?guī)硪黄猨Query判斷元素是否顯示 是否隱藏的簡單實現(xiàn)代碼。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要介紹了jQuery如何計算iframe窗口大小,需要的朋友可以參考下2014-05-05
這篇文章主要介紹了jQuery中removeData()方法用法,實例形式分析了removeData()方法移除匹配元素指定數(shù)據(jù)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄猨query實現(xiàn)input框獲取焦點的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了jQuery中:focus選擇器用法,以實例形式分析了:focus選擇器的功能、定義及匹配獲取焦點元素的使用技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
此jQuery插件為Ajax分頁插件，一次性加載，故分頁切換時無刷新與延遲，如果數(shù)據(jù)量較大不建議用此方法，因為加載會比較慢,接下來詳細介紹使用方法，感興趣的朋友可以了解下2013-01-01
jQuery解決下拉框select設(shè)寬度時IE 6/7/8下option超出顯示不全
jQuery解決IE 6/7/8 BUG：下拉框select設(shè)寬度時option超出顯示不全，經(jīng)過修改效果還不錯，遇到類似情況的朋友可以參考下哈2013-05-05