Examples
シンプルなモーダルダイアログです。
Attributes (属性)
-
data-target="[Pattern]"
-
トリガーとなるボタン側に記述します。
Pattern
で指定したIDやクラス名のモーダルダイアログを開きます。
Example modals-examples-1:
Demo: 結果を別のタブで表示
Code:
HTML
<!-- トリガー -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
表示
</button>
<!-- モーダルダイアログ -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<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">×</span></button>
<h4 class="modal-title">タイトル</h4>
</div>
<div class="modal-body">
<p>右上のバツ印で閉じてください</p>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Example modals-examples-2:
何も表示されないモーダルダイアログ(と言うのか...?)です。ウィンドウをクリックすると復帰します。
Demo: 結果を別のタブで表示
Code:
HTML
<!-- トリガー -->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">
表示
</button>
<!-- モーダルダイアログ -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
</div><!-- /.modal -->