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

Bootstrap3を利用したモーダルウィンドウのサンプルです。
モーダルウィンドウを表示で背景のスクロールバーは非表示となり、スクロールできなくなります。また、背景をクリックしてもモーダルウィンドウを閉じない動作や、モーダルウィンドウの表示サイズ変更もオプションで簡単に実装できます。

htmlのコードは下記になります。

<button type="button" class="btn btn-default 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">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<p class="modal-title">モーダルウィンドウタイトル</p>
			</div>
			<div class="modal-body">
				<p>ダミーテキストダミーテキストダミーテキストダミーテキスト</p>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
			</div>
		</div>
	</div>
</div>
<!-- モーダル終了 -->

リンク元：
リンク元のbuttonタグにはdata-toggle=”modal”が必要です。また、data-targetで対象のモーダルウィンドウのidを指定します。

モーダルウィンドウ：
モーダルウィンドウを表示させるdivタグにidを付与し、リンク元から呼び出せるようにします。また、class=”modal fade”を指定します。1つ内側のdivタグにclass=”modal-dialog”を指定します。コンテンツはその内側に記述します。

モーダルウィンドウ内のコンテンツ部分は下記クラス名の構成になっています。
コンテンツ：class=”modal-content”、ヘッダー：class=”modal-header”、タイトル：class=”modal-title”、ボディ：class=”modal-body”、フッター：class=”modal-footer”

なお、閉じるボタンのbuttonタグにはdata-dismiss=”modal”を指定します。

背景をクリックしてもモーダルウィンドウを閉じない

リンク元のbuttonタグにdata-backdrop=”static”を指定することで、背景をクリックしてもモーダルウィンドウを閉じない動作が実装できます。

<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#div-modal-02" data-backdrop="static">モーダルウィンドウを開く</button>

モーダルウィンドウの表示サイズ変更

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

クラス指定なし：モーダルウィンドウの最大幅600px

<div class="modal-dialog">

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

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

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

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

モーダルウィンドウ表示時のアニメーション削除

class=”modal fade”からfadeを削除しclass=”modal”にすることで、モーダルウィンドウ表示時のアニメーションを削除できます。

<div id="div-modal-06" class="modal">