我在带有滚动的模式中有一个 div,它应该相对于浏览器窗口有固定的位置,并且不应该随着模式滚动。
我尝试了 position:fixed
,但它不起作用。在这里您可以在其上下文中看到问题:
$('.launchConfirm').on('click', function (e) {
$('#confirm').modal({
show: true
});
});
@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<div class="page-container">
<div class="container">
<br />
<button type="button" class="btn launchConfirm">Open modal</button>
</div>
</div>
<div class="modal fade" id="confirm">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<p>One fine body…</p>
<div style="position:fixed;top:40px;left:10px;background-color:red">This div should be fixed<br>and should not scroll away.</div>
</div>
<div class="modal-footer">
some random buttons
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
我该如何修复那个 div?
最佳答案
您需要将 DIV 移出模态框。
当祖先元素应用了transform
时,固定定位与viewport
相关除外。 .modal-dialog
应用了 transform
,它创建了一个新的上下文来放置 DIV(这就是为什么你的 DIV 留在模态内部)。
关于jquery - 在可滚动模态中具有固定位置的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41937320/