bootstrapでモーダルウィンドウ

基本

・bootstrapのCSS、jsの読み込み必須。
・IDを割り振っておく。

▼「data-target="#sampleModal"」と「id="sampleModal"」が対になる

<a href="#" data-toggle="modal" data-target="#sampleModal">モーダルを開くボタン</a>
<!-- button type="button" data-toggle="modal" data-target="#sampleModal">開く</button -->

<div class="modal fade" id="sampleModal" tabindex="-1"><div class="modal-dialog" role="document">
  <div class="modal-content">
    
    <div class="modal-header">
      省略
    </div>
    
    <div class="modal-body">
      省略
    </div>
  </div>
    
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
  </div>
</div></div>

※buttonタグでも大丈夫。

javascript（jquery）で開く

・開くリンクやボタンを対象にclickイベントを実行させる
・「modal()」（or「modal('show')」）を使う

$('#sampleModal').modal();

javascript（jquery）で閉じる

・「modal('hide')」を使う

$('#sampleModal').modal('hide');

関連項目

・bootstrapでモーダルのイベント関連

サンプル

・Bootstrapのモーダルのサンプル