使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口
更新時(shí)間：2014年12月22日 14:35:04 投稿：hebedich
這篇文章主要介紹了使用jQuery和Bootstrap實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口,需要的朋友可以參考下
本篇實(shí)踐一個(gè)多層模態(tài)窗口，而且是自適應(yīng)的。
點(diǎn)擊頁(yè)面上的一個(gè)按鈕，彈出第一層自適應(yīng)模態(tài)窗口。
在第一層模態(tài)窗口內(nèi)包含一個(gè)按鈕，點(diǎn)擊該按鈕彈出第二層模態(tài)窗口，彈出的第二層模態(tài)窗口會(huì)擋住第一層模態(tài)窗口，即第二層模態(tài)窗口打開(kāi)的時(shí)候，無(wú)法關(guān)閉第一層模態(tài)窗口。
具體頁(yè)面實(shí)現(xiàn)部分如下：
復(fù)制代碼 代碼如下:
<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">打開(kāi)第一層模態(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">打開(kāi)第二層模態(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實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口的全部?jī)?nèi)容了，非常的不錯(cuò)，而且很實(shí)用，直接就可以使用到項(xiàng)目中去。
您可能感興趣的文章:
- BootStrap table表格插件自適應(yīng)固定表頭(超好用)
- Markdown+Bootstrap圖片自適應(yīng)屬性詳解
- Markdown與Bootstrap相結(jié)合實(shí)現(xiàn)圖片自適應(yīng)屬性
- Bootstrap頁(yè)面布局基礎(chǔ)知識(shí)全面解析
- bootstrap配合Masonry插件實(shí)現(xiàn)瀑布式布局
- BootStrap學(xué)習(xí)系列之布局組件(下拉,按鈕組[toolbar],上拉)
- BootStrap整體框架之基礎(chǔ)布局組件
- Bootstrap表單布局
- Bootstrap 布局組件（全）
- bootstrap實(shí)現(xiàn)的自適應(yīng)頁(yè)面簡(jiǎn)單應(yīng)用示例
相關(guān)文章
這篇文章主要介紹了JQuery中DOM事件合成用法,以實(shí)例形式分析了hover()方法和toggle()方法實(shí)現(xiàn)事件合成的相關(guān)技巧,需要的朋友可以參考下2015-06-06
jquery關(guān)于頁(yè)面焦點(diǎn)的定位(文本框獲取焦點(diǎn)時(shí)改變樣式 )
用戶在輸入文字時(shí)，如果能高亮顯示正在輸入的那個(gè)文本框的話，會(huì)更人性化些，下面就使用jQuery來(lái)實(shí)現(xiàn)。2010-09-09
本文是一些jquery進(jìn)行封裝實(shí)現(xiàn)的常用的操作，對(duì)平常學(xué)習(xí)工作很實(shí)用，有需要的朋友可以參考下。2016-07-07
修復(fù) jQuery 中 isFunction 方法的 BUG2010-01-01
這篇文章主要介紹了JQuery擴(kuò)展對(duì)象方法操作,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery使用$.fn.extend方法擴(kuò)展對(duì)象方法的相關(guān)操作技巧,需要的朋友可以參考下2018-08-08
jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作
這篇文章主要為大家詳細(xì)介紹了jquery插件ajaxupload實(shí)現(xiàn)文件上傳操作，感興趣的小伙伴們可以參考一下2015-12-12
jQuery針對(duì)input的class屬性寫(xiě)了多個(gè)值情況下的選擇方法
這篇文章主要介紹了jQuery針對(duì)input的class屬性寫(xiě)了多個(gè)值情況下的選擇方法,結(jié)合實(shí)例形式對(duì)比分析了jQuery選擇器針對(duì)class屬性中有多個(gè)值情況下的選中方法,需要的朋友可以參考下2016-06-06
jQuery學(xué)習(xí)筆記 操作jQuery對(duì)象 屬性處理
HTML文檔，不但有一系列語(yǔ)義標(biāo)簽，每個(gè)標(biāo)簽下屬還有一系列屬性節(jié)點(diǎn)。自然我們也想去操作這些屬性節(jié)點(diǎn)。格式仍然為$(selector).方法2012-09-09
相信大部份人都會(huì)把這2個(gè)的用法搞錯(cuò)。仔細(xì)查看下API文檔就可以知道。eq返回的是一個(gè)jquery對(duì)象，get返回的是一個(gè)html 對(duì)象數(shù)組。2011-04-04
在高版本的jquery引入prop方法后，什么時(shí)候該用prop？什么時(shí)候用attr？關(guān)于它們兩個(gè)的區(qū)別，這里談?wù)勎业男牡茫业男牡煤芎?jiǎn)單：對(duì)于HTML元素本身就帶有的固有屬性，在處理時(shí)，使用prop方法。對(duì)于HTML元素我們自己自定義的DOM屬性，在處理時(shí)，使用attr方法。2015-05-05