3

我有一个模态窗口弹出，我想相对于页面上读者的位置居中。实现这一点的最佳方法似乎是使用位置固定/前 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 作为最后的手段来实现这一点？

4

3 回答 3

4

我不太确定这是否是您要问的，但试试这个：

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-02T17:31:08.907 回答
1

这行不通吗？

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

让你的模态有一个容器来保存内容并将其剪辑在一个固定的高度？然后用户可以在模态中滚动，而不用担心 jQuery 解决方案来滚动模态外部直到它到达底部，然后粘在底部等等。

于 2012-08-02T17:29:04.530 回答
0

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

于 2012-08-02T17:29:37.753 回答