jQuery不要！BootstrapモーダルをJavaScriptだけで閉じる
jQuery を使って Bootstrap モーダルを閉じる
jQuery を使用すると、JavaScript コードを簡単に記述して、モーダルウィンドウを開閉したり、その他の操作を行うことができます。
モーダルウィンドウを閉じる方法はいくつかあります。
data-dismiss 属性を使用する
Bootstrap モーダルウィンドウには、data-dismiss="modal" 属性を設定できます。 この属性が設定された要素をクリックすると、モーダルウィンドウが閉じます。
<button type="button" class="btn btn-primary" data-dismiss="modal">閉じる</button>
modal() メソッドを使用する
jQuery を使用して、modal() メソッドを呼び出すことで、モーダルウィンドウを閉じることができます。
$('.modal').modal('hide');
backdrop オプションを使用する
モーダルウィンドウの背景部分をクリックすると、モーダルウィンドウが閉じないように設定できます。
$('.modal').modal({
backdrop: 'static'
});
イベントハンドラを使用する
モーダルウィンドウの hidden.bs.modal イベントにイベントハンドラを設定することで、モーダルウィンドウが閉じられた後に処理を実行できます。
$('.modal').on('hidden.bs.modal', function () {
// ここに処理を記述
});
例
以下の例では、data-dismiss 属性と modal() メソッドを使用して、モーダルウィンドウを閉じる方法を示します。
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">モーダルタイトル</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>
<button type="button" class="btn btn-primary" onclick="openModal()">モーダルウィンドウを開く</button>
<script>
function openModal() {
$('#myModal').modal('show');
}
// モーダルウィンドウが閉じられた後の処理
$('.modal').on('hidden.bs.modal', function () {
// ここに処理を記述
});
</script>
上記の解説を参考に、ご自身の目的に合わせてコードを記述してみてください。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap モーダルサンプル</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqx61gVWgIGe33WNl41i6zK130vTwwjzeEaruP+XY9q6331208YcKG0" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/7eB7ggNWBcuY89VuI=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBkO6S/9dAykX8n0IC3aWxKK/i51Y+T4x8cHcO3evm" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h1>Bootstrap モーダルサンプル</h1>
<button type="button" class="btn btn-primary" id="open-modal-button">モーダルウィンドウを開く</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">モーダルタイトル</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>
</div>
<script>
$(function() {
// モーダルウィンドウを開くボタンのクリックイベント
$('#open-modal-button').click(function() {
$('#myModal').modal('show');
});
// モーダルウィンドウが閉じられた後の処理
$('.modal').on('hidden.bs.modal', function () {
// ここに処理を記述
});
});
</script>
</body>
</html>
動作
上記のコードを実行すると、以下のようになります。
- "モーダルウィンドウを開く" ボタンをクリックすると、モーダルウィンドウが表示されます。
- モーダルウィンドウが閉じられた後、
hidden.bs.modalイベントが発生し、設定した処理が実行されます。
上記のサンプルコードは基本的なものです。
ご自身の目的に合わせて、コードを編集したり、拡張したりすることができます。
Bootstrap モーダルを閉じるその他の方法
以下の方法でも、Bootstrap モーダルを閉じることができます。
JavaScript の document.getElementById() メソッドを使用する
var modal = document.getElementById('myModal');
modal.style.display = 'none';
Bootstrap の modal クラスを使用する
var modal = $('.modal');
modal.modal('hide');
data-dismiss 属性と JavaScript の click() メソッドを使用する
<button type="button" class="btn btn-secondary" data-dismiss="modal">閉じる</button>
$('.modal').click(function() {
$(this).modal('hide');
});
CSS を使用
.modal {
display: none;
}
jQuery を使用している場合は、modal() メソッドを使用するのが最も簡単です。
data-dismiss 属性を使用する方法は、シンプルな方法です。
jquery twitter-bootstrap modal-dialog
