[Bootstrap] モーダルウィンドウを使ってみる

先日とあるサイトを開発した際に、メニューにモーダルウィンドウを利用しました。

今回はBootstrapを利用して、お手軽にモーダルウィンドウを使う方法をご紹介。

モーダルウィンドウは、様々な活用シーンが有るかと思いますが、特にスマホのページなどで活躍すると思います。

1.開くボタンを設置

<!-- モーダルウィンドウを開くボタン -->
<a class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">ひらくよ</a>

このdata-targetで指定した、ID：myModalをページの何処かに定義しておきます。
その定義したIDをモーダルウィンドウとして、開くことが出来ます。

2.モーダルウィンドウを作る

<!-- モーダルウィンドウの中身 -->
<div class="modal fade" id="myModal">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				もーだるのへっだ
			</div>
			<div class="modal-body">
				もーだるのなかみ
			</div>
		</div>
	</div>
</div>

たったのコレだけです。
後はモーダルの中身をメッセージダイアログで使うもよし、メニューで使うも良し、アレンジシてみてください:)