twitter-bootstrap 在可滚动模式中具有固定位置的 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/41937320/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 00:34:01 来源:igfitidea点击:
Div with fixed position in a scrollable modal
提问by neptune
I have a div in a modal with scroll that should have fixed position relative to the browser window, and should not scroll away with the modal.
我在模态中有一个带有滚动的 div，它应该具有相对于浏览器窗口的固定位置，并且不应该随着模态滚动。
I tried position:fixed, but it doesn't work. Here you can see issue in it's context:
我试过了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 -->How could I fix that div?
我怎么能修复那个div？
采纳答案by neptune
I managed to resolve the issue based on answers by @Shiplo Rahman and @Dejan.S
我设法根据@Shiplo Rahman 和@Dejan.S 的回答解决了这个问题
Removed the modal-header, put everything in modal-body and doing a jquery workaround described here: jQuery: Fix div when browser scrolls to it
删除了 modal-header，将所有内容都放在 modal-body 中并执行此处描述的 jquery 解决方法：jQuery: Fix div when browser scrolls to it
$('.launchConfirm').on('click', function (e) {
$('#confirm').modal({
show: true
});
});
jQuery(function($) {
function fixDiv() {
var $cache = $('#getFixed');
if ($('.modal-body').scrollTop() > 50)
{
$cache.css({
'position': 'fixed',
'top': '0px',
'left': '25px',
'width': '600px'
});
}
else
$cache.css({
'position': 'relative',
'top': 'auto',
'left': '10px'
});
}
$('.modal-body').scroll(fixDiv);
fixDiv();
}); @import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
//overflow: hidden;
}
.modal-body {
height: calc(100vh - 126px);
overflow-y: scroll;
}
#getFixed {
position: relative;
left: 10px;
width: 600px;
}<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-body" id="confirm2">
<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 id="getFixed" style="background-color:red">This div should be fixed<br>and should not scroll away.</div>
<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>
<div class="modal-footer">
some random buttons
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->Here is the source: http://jsfiddle.net/roahda03/21/
回答by hungerstar
You will need to move the DIV outside of the modal.
您需要将 DIV 移到模态之外。
Fixed positioning works in relation to the viewportexceptwhen an ancestor element has a transformapplied to it. .modal-dialoghas transformapplied to it which creates a new context in which to position the DIV (this is why your DIV stays inside of the modal).
固定定位相对于 ，viewport除非祖先元素transform应用了 。.modal-dialog已transform应用于它，它创建了一个新的上下文来定位 DIV（这就是为什么你的 DIV 留在模态内）。
回答by Shiplo Rahman
You can use like this.
你可以这样使用。
$('.launchConfirm').on('click', function (e) {
$('#confirm').modal({
show: true
});
});@import url( 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css' );
.modal-open .modal {
overflow: hidden;
}
.modal-body {
height: calc(100vh - 126px);
overflow-y:scroll;
}<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 -->回答by Walex996
to have a fixed div in a modal, do this:
要在模态中有固定的 div，请执行以下操作：
<div class="modal fade" role="dialog">
<div class="fixed-div">
*your fixed div here...
it can even be your .modal-header div*
</div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
CSS:
CSS：
.fixed-div {
width: 100%;
position: fixed;
z-index: 1051; /* anything above 1050*/
background: #fff;
box-shadow: 0 5px 20px 4px rgba(0,0,0,.1);
}
.fixed-divcan be your .modal-headeras well;
but the .modal-headermust be after .modalnot after .modal-content
.fixed-div也可以是你的.modal-header；但.modal-header必须在之后.modal而不是在之后.modal-content
回答by kiwi1342
In the modal-body you should set a max-height and then tell to overflow so:
在 modal-body 中，您应该设置一个最大高度，然后告诉溢出：
.modal-body{
overflow: auto;
max-height: 200px;
}
