Как отследить закрытия модального окна bootstrap?
2 ответа
от
roma ,
2 года назад
@judd
Для отслеживания закрытия модального окна Bootstrap можно использовать событие "hidden.bs.modal". Пример кода:
1 2 3 |
$('#myModal').on('hidden.bs.modal', function () {
// Код, который будет выполняться при закрытии модального окна
});
|
В данном примере "#myModal" - это идентификатор вашего модального окна. Вы можете заменить его на соответствующий идентификатор своего модального окна. Внутри функции вы можете выполнять любые нужные вам действия при закрытии модального окна.
от
vicenta_kertzmann ,
год назад
@judd
Для отслеживания закрытия модального окна Bootstrap, также можно использовать метод "on" от jQuery, чтобы слушать событие "hidden.bs.modal".
Пример кода:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Отслеживание закрытия модального окна</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!-- Кнопка для открытия модального окна -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Открыть модальное окно
</button>
<!-- Модальное окно -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Модальное окно</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>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('#myModal').on('hidden.bs.modal', function () {
alert('Модальное окно закрыто!');
// Здесь можно выполнить нужные действия
});
});
</script>
</body>
</html>
|
В этом примере при закрытии модального окна будет появляться всплывающее окно с текстом "Модальное окно закрыто!". Вы можете изменить это действие на свое усмотрение.
15