モーダルウィンドウ Modals

Bootstrap3で用意されているモーダルウィンドウ Modalsの使い方の説明
Liteboxのようなページ遷移せずにウィンドウを表示する機能です。

モーダルウィンドウの設置

まずは、下記のボタンをクリックしてデモを見てみてください。

				<!-- モーダルウィンドウを呼び出すボタン -->
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">クリックするとモーダルウィンドウが開きます。</button>

				<!-- モーダルウィンドウの中身 -->
				<div class="modal fade" id="myModal">
			    <div class="modal-dialog">
		        <div class="modal-content">
	            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal タイトル</h4>
	            </div>
	            <div class="modal-body">Modal内容</div>
	            <div class="modal-footer">
	              <button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button>
		           </div>
			      </div>
				  </div>
				</div>

上記は公式サイトのサンプルをベースに変更したデータになります。

ソースを簡単に説明していきます。
2行目はモーダルウィンドウを呼び出すボタンになります。
データ属性のdata-toggle="modal"とdata-target="任意のID"を指定。

				<!-- モーダルウィンドウを呼び出すボタン -->
				<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">クリックするとモーダルウィンドウが開きます。</button>

5行目からはモーダルウィンドウの中身の設置になります。
こちらの例では、ヘッダー、内容、フッターが入っています。

5行目はクラスに.modalとボタンに付けた任意のIDを指定し紐づけます。
.fadeはモーダルウィンドウの表示をフェイドインで表示する設定になりますので無くても構いません。

				<!-- モーダルウィンドウの中身 -->
				<div class="modal fade" id="myModal">

6行目の.modal-dialogモーダルウィンドウの表示位置を指定し、
7行目の.modal-contentでモーダルウィンドウの中身の外観を整えています。

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

8行目からはヘッダーの設定です。.modal-headerを指定。
9行目のボタンは右上に表示される閉じるための×ボタンを表示しています。10行目はタイトルの設定です。

				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
					<h4 class="modal-title" id="myModalLabel">Modal タイトル</h4>

12行目は内容の設定です。.modal-bodyを指定。中身はご自由に。

				<div class="modal-body">Modal内容</div>

15行目からはフッターの設定です。.modal-footerを指定。例では閉じるボタンを設置しています。初期設定では右寄せの配置になります。

				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button>
				</div>

ヘッダーやフッターは無くても表示できます。
また、初期設定ではウィンドウ外をクリックすると閉じる設定なので閉じるボタンも必須ではありません。詳細設定などは公式サイトを参照してください。