keyboardオプションを指定し、JavaScriptで呼び出す
モーダル・ダイアログをJavaScriptで呼び出す際に、keyboardオプションを指定する方法。
属性値一覧表
| 属性値 | エスケープ・キーを押した時 |
|---|---|
| true | モーダル・ダイアログを閉じる。 |
| false | モーダル・ダイアログを閉じない。 |
trueを指定したサンプル
サンプル
ソースコード
HTML
<button type="button" id="sampleButton" id="sampleButton" class="btn btn-primary btn-lg"> モーダル・ダイアログ 呼び出し </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" class="btn btn-default" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">ボタン</button> </div> </div> </div> </div>
JavaScript
<script>
$( function() {
$('#sampleButton').click( function () {
$('#sampleModal').modal(
{
keyboard: true,
}
);
});
});
</script>
falseを指定したサンプル
サンプル
ソースコード
HTML
<button type="button" id="sampleButton2" class="btn btn-primary btn-lg"> モーダル・ダイアログ 呼び出し </button> <!-- モーダル・ダイアログ --> <div class="modal fade" id="sampleModal2" 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" class="btn btn-default" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">ボタン</button> </div> </div> </div> </div>
JavaScript
<script>
$( function() {
$('#sampleButton2').click( function () {
$('#sampleModal2').modal(
{
keyboard: false,
}
);
});
});
</script>