为了账号安全,请及时绑定邮箱和手机立即绑定

Bootstrap多层模态框如何嵌套?

/ 猿问

Bootstrap多层模态框如何嵌套?

摇曳的蔷薇 2019-05-25 18:15:35

Bootstrap多层模态框如何嵌套?


查看完整描述

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>




查看完整回答
反对 回复 2019-05-26
?
守候你守候我

直接举个例子吧,见下面主要代码

<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>





查看完整回答
反对 回复 2019-05-26

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信