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

我正在使用，但我必须将它们的位置更改为绝对位置，因为我需要它们能够滚动小屏幕。可悲的是，有了这一点，情态动词打开到了网站的固定位置，而不是在被观看的区域。 有没有办法将它们打开（并可以滚动）到我当前正在查看的屏幕上

CSS:

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

更多详情请点击此处

此帖子：有正确答案，也请点击此处：

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

---

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

重申Stephanie和我共同面临的问题：

我有很长的引导模态。在小屏幕上，如果不滚动，模态就不能完整地显示出来。在引导模式中，默认情况下是position:fixed。我可以通过将此位置更改为“绝对”来允许它们滚动

但现在我有了一个新问题。我的页面也很长，当我从页面底部启动模式时，模式显示在页面顶部，不在当前浏览器视图中

因此，要解决这两个问题：

css:

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则相反。使用此处的注释：

因为我使用的是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);
});

---

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

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

这也适用于我（AllInOne的解决方案）：

---

游戏开始有点晚了，但这是我目前在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%' });
});

---

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

读我写的：“……但我必须将它们的位置更改为绝对，因为我需要它们能够滚动……”你有没有找到解决这个问题的方法？我也在同一条船上。-1引导中的默认值为“已修复”。OP希望用“fixed”来解决问题。这确实有帮助，但现在我在非移动网站的文档中看到了模式。看到我刚才给出的答案，我只从css中维护了我认为它应该是“加”而不是“减”？因为在我的情况下，“负号”会把模态从屏幕上抹掉。我也把“页边数”改为“页边数”。我知道我来晚了，但这确实是解决上述问题的正确方法。谢谢你。

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

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

$('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%' });
});