【モーダルウィンドウ】Bootstrap4を利用する場合

Bootstrap4を利用したモーダルウィンドウのサンプルです。
モーダルウィンドウを画面中央に表示、モーダルウィンドウ内で縦スクロール、特大サイズのモーダルウィンドウを表示、といった新機能があります。なおhtmlのコードは、Bootstrap3から一部変更箇所があります。

まず、htmlのコードです。modal-header内のmodal-titleは1番目に記述、閉じるボタンは2番目に記述します。これがBootstrap3からBootstrap4になって変わった箇所です。記述順が違うとレイアウトが崩れてしまいます。

<button type="button" class="btn btn-secondary btn-lg" data-toggle="modal" data-target="#div-modal-01">モーダルウィンドウを開く</button>
<!-- モーダル開始 -->
<div id="div-modal-01" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<p class="modal-title">モーダルウィンドウタイトル</p>
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
			</div>
			<div class="modal-body">
				<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
			</div>
		</div>
	</div>
</div>
<!-- モーダル終了 -->

モーダルウィンドウを画面中央に表示

class=”modal-dialog”にmodal-dialog-centeredを追加することで、モーダルウィンドウを画面中央に表示することができます。

<div class="modal-dialog modal-dialog-centered">

モーダルウィンドウ内で縦スクロール

class=”modal-dialog”にmodal-dialog-scrollableを追加することで、モーダルウィンドウ内で縦スクロールすることができます。これはモーダルウィンドウ内のコンテンツが多く、縦スクロールが必要な場合のみ有効です。

<div class="modal-dialog modal-dialog-scrollable">

特大サイズのモーダルウィンドウを表示

class=”modal-dialog”にmodal-xlを追加することで、特大サイズのモーダルウィンドウが表示できます。

特大サイズ：モーダルウィンドウの最大幅1140px

<div class="modal-dialog modal-xl">

なお、Bootstrap3で利用されていたクラスも引き続き利用できます。表示サイズは下記の通りで、一部変更になっています。
クラス指定なし：モーダルウィンドウの最大幅500px
小サイズ（modal-sm）：モーダルウィンドウの最大幅300px
大サイズ（modal-lg）：モーダルウィンドウの最大幅800px