Bootstrap多層模態(tài)框如何嵌套？
2 回答
寶慕林4294392
TA貢獻(xiàn)2021條經(jīng)驗(yàn) 獲得超8個贊
使用js去彈出第二個模態(tài)框
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>bootstrap模態(tài)框(modal)</title>
<link href="../../css/bootstrap.min.css" rel="stylesheet">
<script src="../../js/jquery-2.1.1.min.js"></script>
<script src="../../js/bootstrap.min.js"></script>
<!--jquery必須是1.9.0版本以上的
-->
<script>
$(function(){
$("#btn2").click(function(){
$("#show2").modal("show");
});
})
</script>
</head>
<body>
<div class="container ">
<h1 class="page-header">bootstrap模態(tài)框(modal)</h1>
<button class="btn btn-primary" data-toggle='modal' data-target='#show'>登陸</button>
<div class="modal fade " id='show' >
<div class="modal-dialog">
<div class="modal-content">
<button class="close" data-dismiss='modal'>×</button>
<h1 class="modal-title">一層模態(tài)框</h1>
<div class="modal-footer">
<button class="btn btn-primary" data-toggle='modal' id="btn2">再彈</button>
</div>
</div>
</div>
</div>
<div class="modal fade " id='show2'>
<div class="modal-dialog">
<div class="modal-content">
<button class="close" data-dismiss='modal'>×</button>
<h1 class="modal-title">二層模態(tài)框</h1>
<div class="modal-body">
12312312
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- 2 回答
- 0 關(guān)注
- 1600 瀏覽
添加回答
舉報(bào)
0/150
提交
取消