CSS 修复了引导程序 3 模态中的标题位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21590213/
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
Fixed header position in bootstrap 3 modal
提问by Lucas Zardo
I want to use a fixed header in my Bootstrap modal, however if I set .modal-headeras position:fixedit scrolls along with the moda content. How do I create a trully fixed header in BS modal?
我想在我的 Bootstrap 模态中使用固定标题，但是如果我将.modal-header设置为position:fixed它会随着模态内容滚动。如何在 BS 模式中创建真正固定的标题？
回答by Arnold Daniels
Instead of trying to make the header fixed, just fix the height of the body and make it scrollable. That way the header (and footer) will always be visible.
而不是试图使标题固定，只需固定正文的高度并使其可滚动。这样页眉（和页脚）将始终可见。
You can easily do this using the CSS3 vh unittogether with calc. Both vhas calchave pretty good browser support (IE9+).
您可以使用CSS3 vh 单元和calc. 两个VH作为钙具有相当不错的浏览器支持（IE9 +）。
The vh unit is relative to the viewport (= browser window) height. 1 vhis 1% of the height and 100vhmeans 100% of the viewport height.
vh 单位是相对于视口（= 浏览器窗口）高度的。1 vh是高度的 1%，100vh表示视口高度的 100%。
We just need to substract the height of the modal's header, footer and margins. It's going to be difficult it that dynamic. If those sizes are fixed, we just add all the heights.
我们只需要减去模态的页眉、页脚和边距的高度。那样动态会很困难。如果这些尺寸是固定的，我们只需添加所有高度。
Set either the heightor max-heightto calc(100vh - header+footer px).
将height或设置max-height为calc(100vh - header+footer px)。
.modal-body {
max-height: calc(100vh - 210px);
overflow-y: auto;
}
See the jsfiddle
查看 jsfiddle
回答by ritz078
Here's a simple trick. Let me assume that i have to fix the div with class "fixedHeader"
这是一个简单的技巧。让我假设我必须用“fixedHeader”类修复 div
Simple Jquery Way:
简单的jQuery方式：
$('.modal').scroll(function() {
var a=$('.modal').scrollTop();
$('.fixedHeader').css('top',a+'px');
});
CSS
CSS
.fixedHeader {
position:fixed;
}
Whatever i have answered above is for normal bootstrap using jquery.But if someone is using angular bootstrap for the modal then
我在上面回答的是使用 jquery 的普通引导程序。但是如果有人使用 angular bootstrap 作为模态，那么
Angular
角
$timeout(function() {
angular.element('.modal').scroll(function() {
var a = angular.element('.modal').scrollTop();
angular.element('.fixedHeader').css('top', a + 'px');
});
}, 10);
/*Put the above in modalinstance controller*/
/*timeout is necessary as you want to run the function after the modal is loaded or sometimes it may be unable to find the class '.modal' */
CSS
CSS
.fixedHeader {
position:fixed;
}
Make sure you have jquery dependency installed in both cases.
确保在这两种情况下都安装了 jquery 依赖项。
回答by Brendan
My solution may seem a little silly, but it details the steps I took to solve this problem for my use case.
我的解决方案可能看起来有点傻，但它详细说明了我为我的用例解决这个问题所采取的步骤。
I tried something like ritz078's answer, but what I found was that it did not work well on iOS when scrolling, since Safari likes to do things its own way.
我尝试了类似 ritz078's answer 的方法，但我发现它在 iOS 上滚动时效果不佳，因为 Safari 喜欢以自己的方式做事。
So, my solution was to duplicate the bit of code I wanted to affix and place that duplicate code outside of the modal altogether in its own hidden wrapper:
所以，我的解决方案是复制我想要附加的代码位，并将这些重复的代码完全放在模态之外的隐藏包装器中：
<div class="fixed-header">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
</div>
Then I used JS to 1) make the duplicate code visible after I scroll through the modal a bit, 2) close the duplicate code whenever I click out of the modal, and 3) restore functionality to the duplicate modal's close button:
然后我使用 JS 来 1) 在我稍微滚动模态后使重复的代码可见，2) 每当我点击模态时关闭重复的代码，以及 3) 恢复重复模态的关闭按钮的功能：
$('#myModal').on('scroll', function() {
var threshold = 60;
if ($('#myModal').scrollTop() > threshold) {
$('.fixed-header').addClass('affixed');
}
else {
$('.fixed-header').removeClass('affixed');
}
});
$('#myModal').on('hide.bs.modal', function (e) {
$('.fixed-header').removeClass('affixed');
});
$('.fixed-header button').click(function() {
$('#myModal').modal('hide');
});
The challenge here is matching the modal's styling (particularly its width and margins), but this solution lets you scroll the modal freely on iOS without looking funky, which was my goal.
这里的挑战是匹配模态的样式（特别是它的宽度和边距），但是这个解决方案让你可以在 iOS 上自由滚动模态而不会看起来很时髦，这是我的目标。
JSFiddle(forked from Jasny's answerto show how it's different in scope from his answer)
JSFiddle（从Jasny 的回答中分叉出来，以显示它与他的回答的范围有何不同）
回答by davidpauljunior
As per my comment, this was actually an improvement in Bootstrap 3. Allowing long content and having the whole modal scroll, not just the 'content' of the modal.
根据我的评论，这实际上是 Bootstrap 3 的改进。允许长内容并拥有整个模态滚动，而不仅仅是模态的“内容”。
You can override it with something like this, but it's not as nice functionality.
你可以用这样的东西覆盖它，但它不是很好的功能。
.modal {
overflow: hidden;
}
.modal-body {
height: 300px;
overflow: auto;
}
回答by Edmilson Lani
In javascript add a class to modal:
在 javascript 中添加一个类到模态：
windowClass: 'framework-modal'
In css adjust o modal-body:
在 css 中调整 o modal-body：
.framework-modal .modal-body {
max-height: 600px;
overflow: auto;
}
回答by ramiz
In Body content
在正文内容中
CSS:
CSS：
body{
overflow:hidden;
}
