bootstrapでモーダルウィンドウ
作成日:2017-11-20, 更新日:2018-01-03
基本
・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');