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

Question

我正在使用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%;
}

Answer 1

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

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

Answer 2

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

重申斯蒂芬妮和我分享的问题：

我有很长的bootstrap模态。在小屏幕上，如果不滚动，则无法完整地看到模态。默认情况下，bootstrap模态是position：fixed。我可以通过将其更改为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＆lt; 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);
});

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

Answer 3

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

此处有更多详情http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Answer 4

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

Answer 5

还必须改为绝对定位，以便在手机上滚动。

这也适合我（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);
});

Answer 6

问题是CSS - 你的“身体”和“HTML”标签设置为“height：100％”