0

Как узнать, какая кнопка была нажата при закрытии модального окна Bootstrap?

11

Заголовок: Проблема с определением нажатия кнопки "Удалить" в модальном окне при его закрытии

Я пытаюсь реализовать функцию, которая определяет, была ли нажата кнопка "Удалить" в модальном окне при его закрытии. Вот мой 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 ответ(ов)

0

Это тоже работает:

$('#myModal').on('hide.bs.modal', function (e) { 
    var tmpid = $(document.activeElement).attr('id'); 
    alert(tmpid); 
}); 

Это не получит id кнопки 'X' на модальном окне, если вы ей не зададите id. Вместо этого будет возвращен id элемента, который вызывает закрытие модального окна.

0

Чтобы продолжить ответ @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.

0

Мы слишком усложняем ситуацию. Всё просто, как стандартный обработчик кнопки. Атрибут data-dismiss="modal" заставит диалоговое окно исчезнуть, и мы всё равно узнаем, что нужная нам кнопка была нажата.

$('#delete-file-modal').on('click', '#delete-file-modal #confirm-delete-button', function (e) {
  e.preventDefault();
  console.log('удаление подтверждено');
  return false;
});
0

Вот решение, которое хорошо работает с 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 кнопки для выполнения необходимых действий в зависимости от выбранной кнопки.

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь