2 回答

使用js去弹出第二个模态框
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>bootstrap模态框(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模态框(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">一层模态框</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">二层模态框</h1>
<div class="modal-body">
12312312
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

直接举个例子吧,见下面主要代码
<body>
<div data-role="page">
<header data-role="header">
<h1>多层次嵌套列表</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-theme="a">
<li>
<a href="#" data-add-back-btn="true">曹操</a>
<ul>
<li><a href="#">曹仁</a></li>
<li><a href="#">张辽</a></li>
<li><a href="#">司马懿</a></li>
<li><a href="#">夏侯淳</a></li>
</ul>
</li>
<li>
<a href="#">刘备</a>
<ul>
<li><a href="#">关羽</a></li>
<li><a href="#">张飞</a></li>
<li><a href="#">赵云</a></li>
<li><a href="#">黄忠</a></li>
</ul>
</li>
<li>
<a href="#">孙权</a>
<ul>
<li><a href="#">周瑜</a></li>
<li><a href="#">鲁肃</a></li>
<li><a href="#">周泰</a></li>
<li><a href="#">黄盖</a></li>
</ul>
</li>
</ul>
</div>
</div>
</body>
添加回答
举报