モーダル : MT7 Styleguide

詳細な操作が必要な場合に活用します。
モーダルの上にモーダルが重なるといった挙動は避けてください。
Bootstrap のスタイルと挙動を継承するので、クラス名は .modal を記述してください。
新しいクラスを追加する場合も、モーダルは .modal-* と Bootstrap の記法に合わせます。
モーダルを表示させるボタンに記載する data-target 属性の値と、モーダルの aria-labelledby 属性の値は同じにしてください。
モーダルの本文エリアの情報量が増えるとスクロールバーが表示されます。
キャンセルは主要操作ではないことから、ボタンのように見せず .modal-cancel を使って実装します。

基本形

<div class="modal" role="dialog" id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel">タイトル</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>本文</p>
      </div>
      <div class="modal-footer">
        <a data-dismiss="modal" class="modal-cancel">キャンセル</a>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div>
    </div>
  </div>
</div>

ボタン

モーダルを開くボタンは下記のように data-toggle="modal" と、ターゲットにしているモーダルの ID 名が記述されている data-target 属性を加えてください。

<button class="btn btn-primary" data-toggle="modal" data-target="#exampleModal01">モーダル</button>

サイズ

.modal-dialog と一緒に .modal-sm（小）又は .modal-lg を追記すると大きさが変わります。

// 小
<div class="modal" role="dialog" id="exampleModal-sm" aria-labelledby="exampleModalLabel-sm" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

// 大
<div class="modal" role="dialog" id="exampleModal-lg" aria-labelledby="exampleModalLabel-lg" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

概要エリア

モーダル内で複数のステップがあるなど、タイトルだけでは説明不足の場合に用いるエリア。このエリアのヘッダーは h4 を推奨します。

<div class="modal" role="dialog" id="exampleModal02" aria-labelledby="exampleModalLabel02" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel02">タイトル</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-description">
        <div><h4 class="modal-label">タスクタイトル</h4></div>
        <div>1/3</div>
      </div>
      <div class="modal-body">
        <p>本文</p>
      </div>
      <div class="modal-footer">
        <a data-dismiss="modal" class="modal-cancel">キャンセル</a>
        <button type="button" class="btn btn-primary">変更を保存</button>
      </div>
    </div>
  </div>
</div>

選択エリア

選択したアイテムが何か知らせるための UI。選択アイテムは Badge を利用します。2行以上になると自動的にスクロールバーが表示されます。

<div class="modal" role="dialog" id="exampleModal03" aria-labelledby="exampleModalLabel03" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="exampleModalLabel03">タイトル</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-selections">
          <span class="modal-selections__label">Groups / Users Selected:</span>
          <span class="badge badge-pill badge-default" aria-label="Close">Movable Type <span aria-hidden="true">×</span></span>
          ...
        </div>
        <div class="modal-body">
          <p>本文</p>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="modal-cancel">キャンセル</a>
          <button type="button" class="btn btn-primary">変更を保存</button>
        </div>
      </div>
    </div>
  </div>
</div>

再構築

再構築トリガーを設定する際、どのデータが選択されているか示すための UI。設定可能な要素を .badge をつかって表現します。現在選択中の要素には.badge--selected を追記して、今どこを設定中なのか知らせるようにします。

<div class="modal" role="dialog" id="exampleModal04" aria-labelledby="exampleModalLabel04" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalLabel04">タイトル</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-description">
        <div><h4 class="modal-label">トリガーの対象を選択してください</h4></div>
        <div>1/3</div>
      </div>
      <div class="modal-rebuildtriggers">
        <span class="badge badge--selected">サイト</span>にある<span class="badge">データ</span>が<span class="badge">トリガー</span>されたとき、<span class="badge">サイト</span>にある<span class="badge">データ</span>が<span class="badge">再構築</span>される。
      </div>
      <div class="modal-body">
        <p>本文</p>
      </div>
      <div class="modal-footer">
        <a data-dismiss="modal" class="modal-cancel">キャンセル</a>
        <button type="button" class="btn btn-primary">次へ</button>
      </div>
    </div>
  </div>
</div>