2

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

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

我希望该模式与用户的分辨率具有相同的宽度和高度。换句话说，用户显示器支持的最大尺寸。我还希望模态框位于文档的左上角。

我可以像这样手动设置宽度和高度属性：

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

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

另外 top: 0 和 left: 0 规则似乎不起作用。模态显示在顶部被切断，也不是一直到左边。

编辑

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

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

将使用 jquery 设置高度以获取视口高度并将其设置为内联样式。

4

1 回答 1

2

在纯 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 中测试）打开效果仍然是 ..

于 2012-11-26T08:48:20.420 回答