【簡単】モーダルダイアログ(modal dialog)の高さを制限して画面に収める方法

2019年8月19日2022年9月12日

当ページのリンクには広告が含まれている場合があります。

モーダルダイアログって、結構よく使いますよね。

ボタンをクリックしたときや、システムエラーなどが起こったことを通知するときなどに重宝する機能だと思います。

実装自体も簡単なので、私もよく使っています。

そんな便利なモーダルダイアログですが、高さの調整に困ったことはありませんか？

例えば、ダイアログの中に画像を表示させたいけれど、画像ばかりが大きくなってしまい、ダイアログが画面からはみ出てしまうといった感じですね。

私自身も何回か調整に手間取ったことがあるので、同じように困っている方に向けて、記事にまとめてみようと思います。

そんなわけで、今回はモーダルダイアログの高さの最大値を指定する方法についてご紹介しますね。

Bootstrap 4.3.1
jQuery 3.3.1

モーダルダイアログの最大高さを制限する方法

まずは、今回使用するサンプルコードをご紹介します。

<!-- モーダルダイアログを表示するボタン -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
    Launch modal
</button>
    
<!-- モーダルダイアログ本体 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">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><img class='img-sample' src="sample-image.jpg"/></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">OK</button>
            </div>
        </div>
    </div>
</div>

この状態で表示してみると以下のようになります。

モーダルダイアログが画面からはみ出てしまう様子 — モーダルダイアログが縦方向にはみ出てしまう

縦方向に画面からはみ出てしまっていますね。

さて、それではこのモーダルダイアログのデザインを調整していきましょう。

CSSに以下のコードを追加します。

.img-sample {
    max-height: calc(100vh - 350px); /* 「350px」のところはお好みの値でOK */
}

calcを使うと要素の高さや幅を計算させることができます。

vhはviewport heightの略で、ブラウザの高さに対する割合を表します。
ざっくりいうと、100vhでブラウザの縦の高さ分（100%）の長さとなり、30vhにするとブラウザの縦の高さの3割分（30%）の高さになります。

ここではcalcを使って、ブラウザの高さ分（100%）から350px引いた長さを縦の最大値としています。

vhについては、以下の記事がわかりやすいですよ。
参考：CSS には vw, vh, vmin, vmax という単位がある

この状態で試しに確認してみると、高さは制限されていますが、ちょっと全体のバランスが悪くなってしまっています。

モーダルダイアログの高さが制限されたが、横幅が元のままの様子 — 高さは制限されたが横幅が元のままになっている

これではちょっと見栄えが悪いですね。

せっかくなので、横幅を調整して、中央寄せになるように修正してみましょう。

横幅を調整するには、モーダルダイアログの要素をblock要素にする必要があります。
block要素にすると、縦と横の幅を指定することができるからです。

さらに中央寄せすることを考えると、今回はinline-blockを指定するのが良さそうですね。

inline-blockなどのdisplay要素に関しては、以下の記事がとてもわかりやすいのでおすすめです。
参考：【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

それでは、CSSに以下のようにデザインを指定してみましょう。

.modal {
    text-align:center; /* モーダルダイアログを中央寄せにする */
}
.modal-dialog {
    display: inline-block;
    width: auto;
}
.img-sample {
    max-height: calc(100vh - 350px);
}

それでは改良結果を見てみましょう。
実際に表示してみると以下のようになっているはずです。