bootstrap-モーダル-位置・サイズ
Modal の位置・サイズに関する記事です。
モーダルの表示位置を変更
クラス定義
まずはモーダルの位置を調整するためにCSSのクラスを定義する。
.center-modal {
top: 20%;
}
とりあえず、位置をもう少し下にするためにtop:20%を指定。
あとは、モーダルのopenで指定するオプションにwindowClass: 'center-modal'を指定してやればOK。
$uibModal.open({
templateUrl: "modal.html",
windowClass: 'center-modal'
});
これだけで、center-modalで指定したcssでモーダルの位置が調整される。
もう少し右に移動したいときはleft:20%のように設定すれば右に移動する。
20160321追記windowClassに設定したクラスのtopやleftで位置を指定した場合、元の表示位置からずれた分だけモーダルの表示領域がずれるため、backdrop:trueの場合にずれた分の位置でクリックをしてもモーダルが閉じないという現象が発生します。
その場合は
.center-modal .modal-dialog{
margin-top: 20%;
}
のように、一つ下のクラスであるmodal-dialogにmargin-topとして指定してやることで、
クリック領域はずれずにモーダルの内容だけ表示位置をずらすことができます。
モーダルの表示位置を中央に変更
ソースコード
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>縦垂直方向の中央に配置 （公式サイト）
フルスクリーンモーダル（表示幅を全幅にする：公式サイト）
ただ、これらのサイズは、ブレークポイントに応じて「max-width」を指定しているだけなので、画面幅いっぱいには広がってくれません。
例えば、何か複数の画像などのアイテムを選択させるケースなど、情報量を多くしておきたい時には、画面幅いっぱいに広がってくれると助かります。
対処方法
あらかじめ、次のようなCSSクラスを定義しておきます。
.modal-dialog-fluid {
max-width: inherit;
width: 98%;
margin-left: 15px;
}少し解説します。
- 「max-width: inherit;」にてブレークポイントに応じた「max-width」の指定を解除しています。
- 次に、常に画面幅いっぱいに広がるように「width」を98%にしています。100%にしたいところですが、Bootstrapによって、 .modal-daialogの親要素の<div>に対して動的にstyle属性で「padding-right: 21px;」が指定されている影響で、 右側のマージン調整が簡潔にできません。そのため、98%にして少し隙間を空けています。
- 最後に、「margin-left: 15px;」で左側にも隙間を空けています。左側は、このように問題なく調整できます。
モーダルの右側の隙間が若干あいてしまいますが、画面幅いっぱいに広がって要件を満たせそうです。
次に、.modal-dialogクラスを記述している部分に、上記のクラスを追記するだけです。
HTMLの比較（太文字が追加）
修正前
<div class="modal-dialog" role="document">修正後
<div class="modal-dialog modal-dialog-fluid" role="document">次のボタンから、実際に表示できますのでお試しください。
Bootstrap Modals 位置・サイズ・フォーム集
See the Pen Bootstrap Modals – Material Design & Bootstrap 4 by MDBootstrap (@mdbootstrap) on CodePen.
