Bootstrap多层模态框如何嵌套？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Bootstrap多层模态框如何嵌套？相关的知识，希望对你有一定的参考价值。
我希望，首先打开模态框1，然后打开模态框2，然后关闭模态框2，然后关闭模态框1.
但是我发现打开模态框1再打开模态框2的时候，模态框2被模态框1压住了，我希望模态框2压住模态框1.
于是不会了~求教
我知道bootstap是不支持多层模态框，但是还是希望完成这个功能，请知道答案的人回答一下谢谢！
<!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>本回答被提问者采纳
Bootstrap：如何从模态中删除框阴影？
【中文标题】Bootstrap：如何从模态中删除框阴影？【英文标题】：Bootstrap: how to remove the box shadow from the modal? 【发布时间】：2014-03-07 11:58:51 【问题描述】：如何从引导程序的模态中删除框阴影？我尝试了下面的css，但没有运气。有什么想法吗？
CSS，
.modal-dialog
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-moz-transition: none;
-webkit-transition: none;
引导，
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
【问题讨论】：
您的语法是正确的，可能是 css 规则不够强大 - 您是否尝试添加 !important ？ 是的，我做到了。但一点运气都没有。 【参考方案1】：我确实试过这个，似乎可以工作
.modal-content
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,0);
-moz-box-shadow: 0 5px 15px rgba(0,0,0,0);
-o-box-shadow: 0 5px 15px rgba(0,0,0,0);
box-shadow: 0 5px 15px rgba(0,0,0,0);
bootply sample
【讨论】：
什么是-0-box-shadow:??
哦，歌剧应该是-o-。
有没有办法从所有引导元素中移除盒子阴影？【参考方案2】：
别担心，有一个非常简单的解决方案。
您只需要在您的 CSS 选择器中更加具体并包含 div。原因是您尝试在 Bootstrap CSS 中覆盖的样式是 div.modal-dialog ...。
在 CSS 中，element.class 比 .class 更具体，更具体的标签总是优先。
所以你的解决方案很简单：
div.modal-content
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
See the working example on bootply.
【讨论】：
并添加边框：0px;当您只使用 .modal-content 并希望它完全融入背景/背景（具有相同的颜色）时。这非常适合创建全屏导航。【参考方案3】：下面的 css 代码为我工作。
.modal-backdrop.fade.show
display:none;
【讨论】：
以上是关于Bootstrap多层模态框如何嵌套？的主要内容，如果未能解决你的问题，请参考以下文章