Bootstrapでモーダルダイアログを使う方法

Bootstrap を使っているサイトなら意外と簡単に実装ができる モーダルダイアログの実装手順を紹介します。
サイズやフェードの調整、JSによる操作なども簡単にできます。

ファイルの読み込み

モーダルダイアログを使う下準備として以下のファイルを読み込みます。
恐らく 既に読み込んである人も多いと思います。

1. jquery.js
2. bootstrap-transition.js
3. bootstrap-modal.js
4. bootstrap.css

bootstrap.min.js に ②と③のファイルは含まれています。こちらを使用している人の方が多いと思います。

基本のコード

<button class="btn btn-primary" data-toggle="modal" data-target="#modal-example">ここをクリックしてください </button>
<div class="modal fade" id="modal-example" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true">&times;</span>
        </button>
        <b class="modal-title" id="modal-label">モーダルダイアログ</b>
      </div>
      <div class="modal-body">これは モーダルダイアログのサンプルです。 </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

サンプル

オプション

ちょとしたカスタマイズもclass名を加えたりするだけで簡単にできます。

JavaScriptからの制御

以下の記事がすぐに読めるので 興味のある方は 目を通すとよいと思います。
JavaScript経由で モーダルダイアログを表示する方法などが紹介されています。

• BootstrapのJavaScriptで、Modalを使うメモ（とても短いサンプル） - Qiita
• 【Bootstrap3】モーダルに「data-*」属性でデータを渡す - Qiita

参考文献

• Bootstrap でModal（モーダルボックス）を使う方法
• JavaScript - BootstrapのModalが動かない(5360)｜teratail