javascript - Bootstrap 2 - 设置对话框/模态位置

Question

我找到了一种方法来做到这一点：

使用边距来控制对话框位置margin: -335px 0 0 -280px；

设置宽度，您必须重置边距width: 900px; margin: -250px 0 0 -450px;

设置高度使用 max-height max-height: 800px; 基于

http://www.revillwebdesign.com/change-the-height-width-and-position-of-a-modal-in-twitter-bootstrap/

有一个更好的方法吗？使用这种或另一种方法，有没有办法只让对话框向下滑动top:0px并停留在那里直到被解雇？

使用我提到的第一个边距设置可以做到这一点，但很明显，一旦浏览器调整大小，它就会被推到视野之外。

Answer 1

只需覆盖 CSS 位置，例如

.modal, .modal.fade.in {
    top: 0; /* was 10% */
}

请注意，这是使用Bootstrap 2.2.2。唯一的边距是负左边距，它是模态宽度的一半（水平居中模态）。不需要上边距。

这里的 jsFiddle 示例 - http://jsfiddle.net/uuwAn/1/

Answer 2

您可以CSS在最后修改 以存档此行为。

.modal-body {
    max-height: 350px;
    -webkit-overflow-scrolling: touch;
}

@media screen and (max-height: 450px), (max-height: 450px) {
    .modal-body {
        max-height: 130px;
    }

}

现在它将在移动设备上运行良好。注意：通过使用媒体查询完成CSS。