Как узнать, какая кнопка была нажата при закрытии модального окна Bootstrap?
Заголовок: Проблема с определением нажатия кнопки "Удалить" в модальном окне при его закрытии
Я пытаюсь реализовать функцию, которая определяет, была ли нажата кнопка "Удалить" в модальном окне при его закрытии. Вот мой HTML-код модального окна:
<div class="modal fade" id="delete-file-modal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" id="delete_file_form">
<div class="modal-body">
Вы уверены, что хотите удалить этот файл?
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-danger" name="in_confirm_insert" id="confirm-delete-button">Удалить</button>
<button data-dismiss="modal" class="btn btn-default" name="in_confirm_insert" id="cancel-delete-button">Отмена</button>
</div>
</form>
</div>
</div>
</div>
И вот мой JavaScript-код:
$('#delete-file-modal').on('hidden.bs.modal', function (e) {
var delete_button = $(e.target).is("#confirm-delete-button");
if(delete_button === true) {
//удалить файл
alert("файл удален.");
} else {
alert("удаление не удалось.");
};
});
Я ожидаю, что когда модальное окно закрывается, я смогу определить, была ли нажата кнопка "Удалить". Но в текущем коде это не работает. Является ли что-то пропущенным в моем JavaScript-коде?
4 ответ(ов)
Это тоже работает:
$('#myModal').on('hide.bs.modal', function (e) {
var tmpid = $(document.activeElement).attr('id');
alert(tmpid);
});
Это не получит id кнопки 'X' на модальном окне, если вы ей не зададите id. Вместо этого будет возвращен id элемента, который вызывает закрытие модального окна.
Чтобы продолжить ответ @JoshCrozier:
Было бы неплохо, если бы у событий hide.bs.modal/hidden.bs.modal существовало подобное свойство. На момент написания этого ответа такого свойства нет.
Тем не менее, можно эмулировать похожее поведение, присоединяя нажатую кнопку в качестве relatedTarget для последующих обработчиков событий:
$( '.modal-footer .btn[data-dismiss="modal"]' ).on( 'click', function() {
var target = this;
$( target ).closest( '.modal' )
.one( 'hide.bs.modal hidden.bs.modal', function( event ) {
event.relatedTarget = target;
} );
} );
Селектор и обработчик можно оптимизировать в зависимости от того, как используются модальные окна в вашем проекте. Например, если вы уверены, что не будете использовать событие hide.bs.modal
, можно просто изменить событие hidden.bs.modal
.
Мы слишком усложняем ситуацию. Всё просто, как стандартный обработчик кнопки. Атрибут data-dismiss="modal"
заставит диалоговое окно исчезнуть, и мы всё равно узнаем, что нужная нам кнопка была нажата.
$('#delete-file-modal').on('click', '#delete-file-modal #confirm-delete-button', function (e) {
e.preventDefault();
console.log('удаление подтверждено');
return false;
});
Вот решение, которое хорошо работает с BOOTSTRAP 4+ и может быть адаптировано для других версий, включая v5. Может быть полезно кому-то, если потребуется.
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Подтвердить</button>
</div>
$('#prompt_modal').on('shown.bs.modal', function (event) {
let buttons = this.querySelectorAll('.btn'); // или другие селекторы
buttons.forEach(btn => {
btn.onclick = () => {
console.log(btn);
// делаем что-то с btn (textContent, dataset, classList и другие)
// для определения нажатой кнопки...
}
});
});
Это решение позволяет отслеживать нажатия кнопок в модальном окне. Вы можете использовать свойства textContent
, dataset
или classList
кнопки для выполнения необходимых действий в зависимости от выбранной кнопки.
Потеряно HTML-кодирование при чтении атрибута из поля ввода
jQuery/JavaScript: Замена битых изображений
Предварительный просмотр изображений перед загрузкой
jQuery / JavaScript — вызов события нажатия кнопки из события нажатия другой кнопки
Как выполнить код после сброса HTML-формы с помощью jQuery?