自举模态出现在背景下
自举模态出现在背景下
<body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div></body>
body {
padding-top: 50px;}.my-module {
position: fixed;
top: 0;
left: 0;}
Qyouu浏览 370回答 3
3回答
-
波斯汪
如果模态容器具有固定或相对位置，或者位于具有固定或相对位置的元素中，则会发生此行为。确保模态容器及其所有父元素都以默认方式定位，以解决问题。这里有几种方法可以做到这一点：最简单的方法就是移动模态div，所以它在任何元素之外都有特殊的定位。一个好地方可能就在关闭体标签之前。</body>.或者，您可以删除position:CSS属性从模式及其祖先直到问题消失。然而，这可能会改变页面的外观和功能。 -
哆啦的时光机
这个问题与父容器的位置有关。您可以很容易地“移动”您的模式从这些容器，然后显示它。如果你是show使用js的模式：$('#myModal').appendTo("body").modal('show');或者，如果使用按钮启动模式，则删除.modal('show');就这么做：$('#myModal').appendTo("body")这将保持所有正常的功能，允许您使用按钮显示模态。 -
拉丁的传说
我尝试了上面提供的所有选项，但没有让它使用这些选项。什么起作用了：将.mod背景的z索引设置为-1。.modal-backdrop { z-index: -1;}
随时随地看视频慕课网APP
JavaScript
Html/CSS