使用固定模式的中心定位：如何还允许垂直滚动？

我有一个模式窗口弹出，我想要相对于读者在页面上的位置居中。实现这一目标的最佳途径似乎是位置固定/前50％的解决办法：使用固定模式的中心定位：如何还允许垂直滚动？

.fixed { 
    position:fixed; 
    width:100px; 
    height:100px; 
    top:50%; 
    left:50%; 
    margin-left:-50px; 
    margin-top:-50px; 
}

到目前为止好，模态在精确的中心弹出。见的jsfiddle这里： http://jsfiddle.net/cbqN2/

但我希望我的用户能够滚动的模式，如果内容是他们的屏幕时间过长： http://jsfiddle.net/xwhMa/1

任何方式实现这一目标，通过嵌套不同位置的div ，或JQuery作为最后的手段？

来源

2012-08-02 Ila

这当然是可能的，但它肯定会需要的JavaScript（因此你应该使用jQuery的）。 – KRyan 2012-08-02 17:02:13

这不行吗？有你的模式

http://jsfiddle.net/demchak_alex/cbqN2/3/

都保持在一个固定高度的内容和剪辑它的容器？然后用户可以在滚动模式，而不是担心一个jQuery解决方案来滚动模态外，直至碰到底部，然后坚持到谷底，等等，等等

来源

2012-08-02 17:29:04 Xhynk

这只是一个position: fixed特点:)这是..好，永远保持固定在屏幕上。如果您希望它出现在中心，但在用户滚动页面时移动，只需使用position: absolute;而不是fixed。像这样：http://jsfiddle.net/skip405/cbqN2/2/

来源

2012-08-02 17:29:37 skip405

是的，但有没有办法让一个绝对定位的div显示“相对”的页面部分当前焦点？回答我自己的问题：我想我可以通过JQuery产生绝对定位值，用户仍然可以滚动。将尝试。 – Ila 2012-08-02 17:34:28

我不太清楚，如果这是你问什么，但试试这个：

ul li {font-size:23px} 
.fixed { 
    width:200px; 
    height:200px; 
    background:red; 
    position:fixed; 
    top:50%; 
    left:50%; 
    margin-top:-100px; 
    margin-left:-100px; 
    **overflow-y:scroll** 
}

来源

2012-08-02 17:31:08 Jeff

使用固定模式的中心定位：如何还允许垂直滚动？

回答

相关问题