ユーザーの注意を確実に引きつける！Bootstrap Modalを強制的に表示する
2024-04-02
Bootstrap ModalがクリックやEscキーで消えないようにする方法
特定の状況下では、この動作が望ましくない場合があります。 例えば、以下のようなケースです。
- ユーザーに重要な情報を必ず確認してもらいたい場合
- フォームに入力してもらい、途中で閉じられたくない場合
- 動画を最後まで視聴してもらいたい場合
このような場合は、Bootstrap ModalがクリックやEscキーで消えないように設定する必要があります。
設定方法
Bootstrap ModalがクリックやEscキーで消えないようにするには、以下の2つの方法があります。
backdrop オプションは、Modalの背景をクリックできるかどうかを制御します。デフォルトでは true に設定されており、背景をクリックするとModalが閉じます。これを false に設定すると、背景をクリックしてもModalが閉じなくなります。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Modalを開く
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modalタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
$('#myModal').modal({
backdrop: 'static'
});
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Modalを開く
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modalタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
$('#myModal').modal({
keyboard: false
});
Bootstrap ModalがクリックやEscキーで消えないようにするには、backdrop オプションまたは keyboard オプションを使用します。これらのオプションを設定することで、ユーザーがウィンドウ外をクリックしても、Escキーを押しても、Modalが閉じなくなります。
補足
- 上記の方法は、Bootstrap 4.x で動作します。Bootstrap 3.x では、オプションの名前や設定方法が異なる場合があります。
backdropオプションを'static'に設定すると、ユーザーはウィンドウ外をクリックしても、Escキーを押しても、Modalを閉じることができません。これは、ユーザーに重要な情報を必ず確認してもらいたい場合などに有効です。keyboardオプションをfalseに設定
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Modal サンプル</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iq561gTWGKAqpf1z9D9GmY4iHJ450Xz4WXqnV5MWpaxL8AYsw32I79n3w" crossorigin="anonymous">
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Modalを開く
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myModalLabel">Modalタイトル</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2ePHKXbwo9
Bootstrap ModalがクリックやEscキーで消えないようにする他の方法
JavaScriptを使用する
以下のJavaScriptコードは、Modalの背景をクリックしても、Escキーを押しても、Modalが閉じないように設定します。
$(document).ready(function() {
$('#myModal').modal({
backdrop: 'static',
keyboard: false
});
// Modalの背景をクリックしても閉じないようにする
$('.modal-backdrop').click(function(e) {
e.stopPropagation();
});
// Escキーを押しても閉じないようにする
$(document).keydown(function(e) {
if (e.keyCode === 27) {
e.preventDefault();
}
});
});
CSSを使用する
以下のCSSコードは、Modalの背景を透明にして、ユーザーがクリックしても何も起こらないように設定します。
.modal-backdrop {
opacity: 0;
pointer-events: none;
}
Modalプラグインを使用する
Bootstrap Modalの機能を拡張するプラグインもいくつか存在します。これらのプラグインの中には、ModalがクリックやEscキーで消えないように設定する機能が提供されているものもあります。
$(document).ready(function() {
$('#myModal').modalManager({
backdrop: 'static',
keyboard: false
});
});
Bootstrap ModalがクリックやEscキーで消えないようにするには、いくつかの方法があります。上記の方法を参考に、状況に応じて適切な方法を選択してください。
補足
- 上記の方法を使用する場合は、Bootstrapのバージョンや使用しているプラグインのバージョンに注意してください。
- Modalの背景をクリックしても閉じないように設定すると、ユーザーが誤ってModalを閉じてしまう可能性があります。注意が必要です。
- Escキーを押しても閉じないように設定すると、ユーザーがキーボード操作でModalを閉じることができなくなります。注意が必要です。
html twitter-bootstrap modal-dialog
