HTML/CSS

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

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

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

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

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

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

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

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

記事内で使用しているバージョンは以下の通りです。
  • 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">&times;</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);
}

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

モーダルダイアログの高さと幅が調整された様子
調整後(PC表示)

きちんと画面にはまっていますし、中央寄せにもなっていますね。

ちなみに、スマホからみた場合は以下のように見えます。

モーダルダイアログの縦と横が調整された様子(スマホ表示)
調整後(スマホ表示)

これで、モーダルダイアログの高さを制限しつつ、中央寄せで表示することができましたね。

スマホ表示にも対応できるので、calcで計算している部分を調整いただければ、お好みの縦幅で表示できて便利だと思います。

参考:How to limit the height of the modal?

終わりに

今回はモーダルダイアログの高さの最大値を指定する方法ついてご紹介しました。

Bootstrapは簡単に使えて便利なので、普段何気なく使ってしまいがちですが、ある程度調整したりする場合は多少の知識が必要です。

Bootstrap4について勉強する方法はいくつかありますが、英語に苦手意識がない方は、一度公式ドキュメントを確認することをおすすめします。
サンプルコードやデモも豊富ですので、いろいろと触りながら学習することができますよ。

英語はちょっと、という方には日本語で書かれた以下の本がおすすめです。

Bootstrap4に関する情報が1つにまとまっているので、一度目を通しておくと必要な知識や用語が頭に入ると思います。

基本的な用語や使い方が分かってしまえば、どのようなキーワードで検索すれば良いのかが分かるようになるので、今後の学習スピードがぐっとあがりますよ。

今回はここまでです。それでは。