jquery - Twitter Bootstrap Modal:使宽度和高度与用户的最大分辨率相同

如果单击“启动演示模态”按钮：

http://twitter.github.com/bootstrap/javascript.html#modals

我希望该模态的宽度和高度与用户的分辨率相同。换句话说，用户监视器支持的最大大小。我还希望该模式位于文档的左上方。

我可以手动设置width和height属性，如下所示：

.modal {
  top: 0 !important;
  left: 0 !important;
  width: 1335px;
  height: 900px;
}

但是这些是我的决议所特有的。如何设置它以适用于每个用户的唯一分辨率？

另外，顶部：0和左侧：0规则似乎不起作用。模态显示在顶部截断，也不总是在左侧。

编辑

愚蠢的我，引导CSS在模式类上有一些默认的负边距。这有效：

.modal {
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

将使用jquery设置高度，以获取视口高度并将其设置为嵌入式样式。

最佳答案

在纯CSS中

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 100%;
  left: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.modal-body {
  max-height: 100%;
}
.modal.fade.in {
  top: 0;
}

对我有用（在Chrome，FF和Opera中测试），打开效果仍然..