将模态层设置为查看屏幕的中心答案

【问题标题】：Set modal layer to the center fo the viewed screen将模态层设置为查看屏幕的中心
【发布时间】：2012-10-07 12:31:09
【问题描述】：

我正在使用Twitter Bootstrap's modal，但我不得不将它们的位置更改为绝对位置，因为我需要它们能够滚动小屏幕。可悲的是，有了这个，模态打开到站点的固定位置，而不是在查看区域。有什么方法可以将它们打开（并且可以滚动）到我当前正在查看的屏幕上？

CSS：

.modal {
    width: 845px;
    margin: -250px 0 0 -430px;
    background-color: #f6f5ed;
    position: absolute;
    border: 1px solid #cdc4b2;
    top: 50%;
    left: 50%;
}

【问题讨论】：

标签： twitter-bootstrap modal-dialog centering

【解决方案1】：

问题在于 CSS - 你的“body”和“HTML”标签设置为“height: 100%”

【讨论】：

【解决方案2】：

游戏有点晚了，但这是我目前的修复程序，适用于 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%' });
});

【讨论】：

【解决方案3】：

还必须更改为绝对定位，这样它才能在手机上滚动。

这对我也有用（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);
});

【讨论】：

【解决方案4】：

尽管我的问题与@Stephanie 相同，但@steve 的解决方案对我不起作用。

重申斯蒂芬妮和我共同的问题：

我有很长的引导模式。在小屏幕上，如果不滚动，就无法完整地看到模态框。默认情况下，引导模式是位置：固定。我可以通过将其更改为 position:absolute 来允许它们滚动。

但现在我遇到了一个新问题。我的页面也很长，当我从页面的 bottom 触发模态框时，模态框会出现在页面的 top 处，超出当前浏览器视图。

所以要解决这两个问题：

css:

// allows the modal to be scrolled
.modal {position: absolute;}

javascript/jQuery:

// jumps browser window to the top when modal is fired
$('body').on('show', '.modal', function(){
  $('body').scrollTop(0);
});

但事实证明，Firefox 不喜欢 'body' 作为 scrollTop 的选择器，但喜欢 'html'。 Webkit 则相反。使用此处的评论：Animate scrollTop not working in firefox

由于我使用的是 jQuery

// 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);
});

现在，当模态框被触发时，它们会出现在页面顶部，浏览器窗口会向上滚动以显示它们，但如果屏幕太小而无法显示模态框的整个长度，用户仍然可以向下滚动。

【讨论】：

我知道我迟到了，但这确实是解决上述问题的正确方法。谢谢你。

【解决方案5】：

这个帖子：Modal plugin of Bootstrap 2 is not displayed by the center 有正确答案，也发布在这里：

   $('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });

【讨论】：

这确实有帮助，但现在模式对我来说一直从非移动网站上的文档中射出。
看我刚才给出的答案，我只从css维护
我认为应该是“加号”而不是“减号”？因为在我的情况下，“减号”将模式置于屏幕之外。而且我还将“margin-top”更改为“top”。

【解决方案6】：

使用位置“固定”而不是“绝对”。

【讨论】：

阅读我写的内容：“......但我必须将它们的位置更改为绝对位置，因为我需要它们能够滚动......”
你有没有找到解决这个 stefanie 的方法？我在同一条船上。
-1 引导程序中的默认值是“固定的”。 OP 正在寻求克服“固定”的问题。