15

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

我的问题图片

CSS：

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

6 回答 6

15

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

   $('#YourModal').modal().css(
            {
                'margin-top': function () {
                    return window.pageYOffset-($(this).height() / 2 );
                }
            });
于 2013-02-06T22:10:33.037 回答
4

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

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

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

但现在我有一个新问题。我的页面也很长，当我从页面底部触发模式时，模式出现在页面顶部，超出当前浏览器视图。

所以要解决这两个问题：

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

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

于 2013-10-09T15:11:17.450 回答
2

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

更多细节在这里http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

于 2012-10-18T07:12:56.907 回答
1

游戏有点晚了，但这是我目前的修复程序，适用于 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%' });
});
于 2013-11-14T15:59:28.903 回答
0

也必须更改为绝对定位，以便它可以在手机上滚动。

这也对我有用（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);
});
于 2013-11-14T14:41:32.367 回答
0

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

于 2014-08-13T08:44:01.423 回答