表示・非表示に関するメソッド
モーダル・ダイアログの表示・非表示に関するtoggleメソッド、showメソッド、hideメソッドについて。
構文
$(セレクター).modal('toggle');
$(セレクター).modal('show');
$(セレクター).modal('hide');
表示・非表示メソッド一覧表
| メソッド | 表示・非表示 |
|---|---|
| toggle | モーダル・ダイアログが開いていれば閉じる。モーダル・ダイアログが閉じていれば開く。 |
| show | モーダル・ダイアログを開く。 |
| hide | モーダル・ダイアログを閉じる。 |
サンプル
サンプル
ソースコード
HTML
<button type="button" id="sampleButtonToggle" class="btn btn-primary btn-lg"> toggle </button> <button type="button" id="sampleButtonShow" class="btn btn-primary btn-lg"> show </button> <!-- モーダル・ダイアログ --> <div class="modal fade" id="sampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">タイトル</h4> </div> <div class="modal-body"> 本文 </div> <div class="modal-footer"> <button type="button" id="sampleButtonToggle2" class="btn btn-default">toggle</button> <button type="button" id="sampleButtonHide" class="btn btn-default">hide</button> </div> </div> </div> </div>
JavaScript
<script>
$( function() {
$('#sampleButtonToggle').click( function () {
$('#sampleModal').modal('toggle');
});
$('#sampleButtonToggle2').click( function () {
$('#sampleModal').modal('toggle');
});
$('#sampleButtonShow').click( function () {
$('#sampleModal').modal('show');
});
$('#sampleButtonHide').click( function () {
$('#sampleModal').modal('hide');
});
});
</script>
このJavaScriptコードは、jquery.min.jsを読み込んだ後に配置する必要がある。