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

我使用的是Twitter Bootstrap's modal，但我必须将其位置更改为绝对位置，因为我需要它们能够滚动小屏幕的原因。不幸的是，有了这个，模态开放到了站点的固定位置，而不是在查看区域。有什么办法打开他们（并能够滚动）到我目前正在查看的屏幕？将模态图层设置为查看屏幕的中心

Picture of my problem

CSS：

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

来源

2012-10-17 Stefanie

更多细节此主题：Modal plugin of Bootstrap 2 is not displayed by the center具有正确的答案，在这里张贴的：

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

来源

2013-02-06 22:10:33 steve

谢谢，这有帮助！ :) – Stefanie

这确实有帮助，但是现在，模式一直沿着非移动网站的文档向我发送。 – mbrochh

看到我刚刚给出的答案，我从css只维护 – Innodel

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

这里http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

来源

2012-10-18 07:12:56 tomaszbak

阅读我写的：” ......但我不得不改变其位置绝对的，因为我需要他们能够滚动...“ – Stefanie

你有没有找到这个孙燕姿的解决方案？我在同一条船上。 – TerryB

-1 bootstrap中的默认值是“固定的”。 OP正在寻求解决“固定”问题。 – AllInOne

从@steve的解决方案并没有为我，尽管我的工作问题被等同于@斯蒂芬妮。

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

我有很长的引导模态。在小屏幕上，如果没有滚动，模式将无法完整显示。默认情况下，引导模式的位置是：固定的。我可以通过将其更改为position：absolute来让它们滚动。

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

因此，要解决这两个：

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不喜欢 '身体' 的选择为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-09 15:11:17 AllInOne

我知道我迟到了党，但这是真正的正确的解决方案对于所述的问题。谢谢你。 – max7

不得不改变绝对定位，所以它会滚动手机。

这为我工作，以及（由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-14 14:41:32 user2959136

有点晚了比赛，但是这是修复我现在有到位和工作在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-14 15:59:28 Damian

的问题是CSS - 你的“身体” &“HTML”代码设置为“高度：100％”

来源

2014-08-13 08:44:01

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

回答

相关问题