2

「Launch demo modal」ボタンをクリックした場合:

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

そのモーダルをユーザーの解像度と同じ幅と高さにしたい。つまり、ユーザーのモニターがサポートする最大サイズです。また、モーダルをドキュメントの左上に配置したいと考えています。

次のように、幅と高さのプロパティを手動で設定できます。

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

しかし、これらは私の決意に固有のものです。各ユーザーの固有の解像度に適用されるように設定するにはどうすればよいですか?

上: 0 と左: 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 に答える