在第一層模態(tài)窗口內(nèi)包含一個(gè)按鈕，點(diǎn)擊該按鈕彈出第二層模態(tài)窗口，彈出的第二層模態(tài)窗口會(huì)擋住第一層模態(tài)窗口，即第二層模態(tài)窗口打開的時(shí)候，無法關(guān)閉第一層模態(tài)窗口。
<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實(shí)現(xiàn)多層、自適應(yīng)模態(tài)窗口的全部?jī)?nèi)容了，非常的不錯(cuò)，而且很實(shí)用，直接就可以使用到項(xiàng)目中去。
