2016/05/08 Web Design

BOOTSTRAP3のモーダルが便利そうなので使ってみた結果便利でした。

BOOTSTRAP3のモーダルが便利そうなので使ってみた結果便利でした。

どうも最近Bootstrapを使用する機会があったので便利だなって思ったのでシェアいたします。HTML,CSS,JSごりごりできる人にとっては自分でできちゃうので意味ないですが、JS書けないって人でもBootstrapのモーダルはできちゃうので初心者の方はぜひトライしてみてください。

Modal-Bootstrap公式

デモ

See the Pen Modal – Bootstrap by Keisuke Yamashita (@keisuke1989) on CodePen.

サンプルコード

<!-- モーダル表示用のボタン -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Show Modal
</button>

<!-- モーダル -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <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" id="myModalLabel">Lorem ipsum</h4>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
モーダルを表示させるためのボタンのコード
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Show Modal
</button>

data-targetにモーダルのidを指定してあげて、data-toggleにmodalを指定するだけです。classには自分のお好みで追加してあげてCSSいじってみてください。とりあえず今はBootstrapのベーシックなボタンで実装しています。

モーダル部分

外側

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

上記のコードがモーダルの外側部分になります。idに先ほどボタンのdata-toggleで指定したのと同じ値を、classにはmodalを指定してください。fadeクラスはモーダルを表示する際の動きになります。

内側

ヘッダー

<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">Lorem ipsum</h4>
</div>

モーダルのヘッダー部分になります。とくに中に入れなければいけないというわけではありません。お好みでつけるかつけないか決めてください。ただUX的に考えてクローズボタンは右上に設置していた方がユーザーに対して親切だと思うのでヘッダーはあった方がいいと思います。data-dismiss=”modal”を指定してあげるだけでボタンをクリックしたらモーダルが閉じるようになっています。

ボディ

<div class="modal-body">
    <p>モーダルボックスの中身です。</p>
</div>

特に言うことはないのですが、ここにコンテンツを入れていきます。モーダルの幅はBootstrapのデフォルトでpxなのでもっと広くしたいとか狭くしたい人は自分のCSSで上書きしてしまいましょう。それかmodal-dialogと同じところにmodal-smやmodal-lgを追加すればBootstrapが用意した別のサイズのモーダルが使用できます。

フッター

<div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">閉じる</button>
    <button class="btn btn-primary">DONE</button>
</div>

こちらも任意でつけるかつけないかを決めれます。

以上がBootstrapのモーダルの説明になります。
JSを触らなくて実装できるのは初心者にとって非常にいいですよね。（実際は自分で実装できた方がいいのですが。。。。）

他にもBootstrapにはクラスを付与するだけで使用できる便利な機能があるので近々ご紹介します。

関連する記事