twitter-bootstrap 将模态层设置为查看屏幕的中心
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12931110/
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
Set modal layer to the center fo the viewed screen
提问by Stefanie
I'm using Twitter Bootstrap's modal, but I had to change their position to absolute, be cause I need them to be able to scroll cause of the small screens. Sadly, with this, the modals open to a fixed position of the site and not on the viewed area. Is there any way to open them (and be able to be scrolled) to the screen what I'm currently viewing?
我正在使用Twitter Bootstrap 的 modal，但我不得不将它们的位置更改为绝对位置，因为我需要它们能够滚动小屏幕的原因。遗憾的是，有了这个，模态打开到站点的固定位置，而不是在查看区域。有什么方法可以将它们打开（并能够滚动）到我当前正在查看的屏幕上？
CSS:
CSS：
.modal {
width: 845px;
margin: -250px 0 0 -430px;
background-color: #f6f5ed;
position: absolute;
border: 1px solid #cdc4b2;
top: 50%;
left: 50%;
}
回答by steve
This thread: Modal plugin of Bootstrap 2 is not displayed by the centerhas the correct answer, posted here as well:
这个帖子：Bootstrap 2 的 Modal plugin is not display by center有正确答案，也贴在这里：
$('#YourModal').modal().css(
{
'margin-top': function () {
return window.pageYOffset-($(this).height() / 2 );
}
});
回答by AllInOne
The solution from @steve did not work for me despite my issue being identical to @Stephanie.
尽管我的问题与@Stephanie 相同，但@steve 的解决方案对我不起作用。
Restating the problem that Stephanie and I share:
重申斯蒂芬妮和我分享的问题：
I have long bootstrap modals. On small screens the modals cannot be seen in their entirety without scrolling. By default in bootstrap modals are position:fixed. I can allow them to be scrolled by changing this to position:absolute.
我有很长的引导模式。在小屏幕上，不滚动就无法完整地看到模态。默认情况下，引导模式是 position:fixed。我可以通过将其更改为 position:absolute 来允许它们滚动。
But now I have a new problem. My pages are long too, and when I fire the modal from the bottomof the page the modal is appearing at the topof the page, out of the current browser view.
但现在我有一个新问题。我的页面也很长，当我从页面底部触发模式时，模式出现在页面顶部，超出当前浏览器视图。
So to fix both of these:
所以要解决这两个问题：
css:
css：
// allows the modal to be scrolled
.modal {position: absolute;}
javascript/jQuery:
javascript/jQuery：
// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
$('body').scrollTop(0);
});
But it turns out that Firefox does not like 'body' as a selector for scrollTop, but does like 'html'. Webkit operates conversely. Using a comment from here: Animate scrollTop not working in firefox
但事实证明，Firefox 不喜欢 'body' 作为 scrollTop 的选择器，而是喜欢 'html'。Webkit 则相反。使用这里的评论：Animate scrollTop not working in firefox
Since I am using jQuery < 1.9 I can do browser sniffing to solve this:
由于我使用的是 jQuery < 1.9，我可以通过浏览器嗅探来解决这个问题：
// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
// Firefox wants 'html', others want 'body'
$(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});
Now when the modals are fired they appear at the top of the page, the browser window scrolls up to expose them, but the user can still scroll down if their screen is too small to display the entire length of the modal.
现在，当模态被触发时，它们会出现在页面顶部，浏览器窗口会向上滚动以显示它们，但是如果他们的屏幕太小而无法显示模态的整个长度，用户仍然可以向下滚动。
回答by tomaszbak
Use position "fixed" not "absolute".
使用位置“固定”而不是“绝对”。
More details here http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
更多细节在这里http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
回答by Damian
A bit late to the game but this is the fix I currently have in place and works on Firefox, Chrome and IE.
游戏有点晚了，但这是我目前的修复程序，适用于 Firefox、Chrome 和 IE。
$('body').on('show', '.modal', function () {
$(this).css({ 'margin-top': window.pageYOffset - $(this).height() / 2, 'top': '50%' });
$(this).css({ 'margin-left': window.pageXOffset - $(this).width() / 2, 'left': '50%' });
});
回答by Aro Hostmaster
The problem is CSS - your "body" & "HTML" tags are set to "height: 100%"
问题是 CSS - 你的“body”和“HTML”标签被设置为“height: 100%”
回答by user2959136
Had to change to absolute positioning also so it would scroll on mobiles.
还必须更改为绝对定位，以便它可以在手机上滚动。
This worked for me as well (solution by AllInOne):
这对我也有用（AllInOne 的解决方案）：
// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
// Firefox wants 'html', others want 'body'
$(jQuery.browser.mozilla ? "html" : "body").scrollTop(0);
});
