ダイアログ

bootstrap標準のモーダルを利用したダイアログです。削除時の確認の場合など、ユーザーに他の操作を制限して何らかの明示的なアクションを要求する場合に使用します。

モーダルを呼び出すトリガとなる要素に任意のIDを指定します

<a class="btn" href="#" data-toggle="modal" data-target=".dialog--01">CONFIRM</a>
<a class="btn" href="#" data-toggle="modal" data-target=".dialog--02">ERROR</a>
<a class="btn" href="#" data-toggle="modal" data-target=".dialog--03">WARNING</a>
<a class="btn" href="#" data-toggle="modal" data-target=".dialog--04">INFORMATION</a>

表示するモーダルダイアログを.wrapperの外にマークアップします。

<div class="modal fade dialog--01" id="dialog--01">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div class="modal-header--title"></div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <p class="modal--diaglog--text text-center">
              確認メッセージがはいります
            </p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <div class="row">
          <div class="col-xs-6 col-sm-6 col-md-6">
            <button class="btn btn-flat-default btn-block" data-dismiss="modal">キャンセル</button>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6">
            <button class="btn btn-flat-primary btn-block" data-dismiss="modal">はい</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>