Как я узнаю, какая кнопка нажата, когда модал начальной загрузки закрывается?

Ответ 1

Опция 1

В слушателе события hidden.bs.modal event.target ссылается на скрытый модальный элемент, а не на элемент, по которому щелкают, вызвавшего событие.

Если вы хотите определить, какая кнопка вызвала модальное закрытие, можно добавить прослушиватели событий для элементов кнопки внутри модального окна. Затем внутри слушателя события кнопки вы можете прослушать событие hidden.bs.modal в родительском элементе #modal, чтобы определить, был ли модальный закрыт. Поскольку слушатель события hidden.bs.modal находится внутри слушателя события нажатия click, у вас все еще есть ссылка на элемент, который вызвал событие click.

Пример здесь

$('#delete-file-modal .modal-footer button').on('click', function(event) {
  var $button = $(event.target); // The clicked button

  $(this).closest('.modal').one('hidden.bs.modal', function() {
    // Fire if the button element 
    console.log('The button that closed the modal is: ', $button);
  });
});

Стоит также упомянуть, что метод .one() будет запускать событие только один раз при каждом его подключении (это именно то, что нам нужно). В противном случае, если вы использовали .on() или .click() чтобы прикрепить событие, событие могло бы .click() несколько раз, так как оно повторно присоединяется при каждом срабатывании прослушивателя события click.

Вариант № 2

Согласно соответствующей документации Bootstrap, события show.bs.modal/shown.bs.modal имеют свойство relatedTarget прикрепленное к событию.

Если вызвано щелчком, элемент, по relatedTarget щелкнули, доступен как свойство relatedTarget события.

Таким образом, вы можете определить элемент, который вызвал событие модального открытия, event.relatedTarget доступ к event.relatedTarget внутри слушателя события модального шоу:

Пример здесь

$('#delete-file-modal').on('show.bs.modal', function (event) {
    console.log(event.relatedTarget);
});

Имейте в виду, что свойство relatedTarget связано только с событиями модального шоу. Было бы хорошо, если бы у них было подобное свойство, связанное с hide.bs.modal/hidden.bs.modal. На момент написания этого там в настоящее время нет.

Вариант № 3

Как отметил Эндрю в комментариях под этим ответом, вы также можете проверить, какой элемент на странице имеет фокус, перейдя к document.activeElement.

В приведенном ниже фрагменте прослушиватель событий присоединен к модальному элементу для событий show и hide. Когда событие инициируется, выполняется проверка, чтобы увидеть, имеет ли элемент, который в данный момент сфокусирован на элементе, атрибут [data-toggle] или [data-dismiss] (что подразумевает, что он действительно инициировал событие).

Пример здесь

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);

  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    console.log($activeElement);
  }
});

Если вы слушаете оба события показа/скрытия, как в примере выше, и вы хотите различать события, вы можете проверить event.type:

Пример здесь

$('#delete-file-modal').on('hide.bs.modal show.bs.modal', function(event) {
  var $activeElement = $(document.activeElement);

  if ($activeElement.is('[data-toggle], [data-dismiss]')) {
    if (event.type === 'hide') {
      // Do something with the button that closed the modal
      console.log('The button that closed the modal is: ', $activeElement);
    }

    if (event.type === 'show') {
      // Do something with the button that opened the modal
      console.log('The button that opened the modal is: ', $activeElement);
    }
  }
});

Ответ 2

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

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

Он не получит идентификатор "X" на модальном, если вы его не id. Вернет идентификатор элемента, который вызывает закрытие модального....

Ответ 3

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

Ответ 4

Ответ @JoshCrozier является хорошим и полезным, но иногда нам нужно Определить, что элемент ведьмы вызвал модальный доступ к открытому/закрытому ПОСЛЕ того, как он был закрыт. (@Nomad упомянул об этом в комментариях ниже ответ @JoshCrozier).

Также несколько раз нам нужно определить, какая ссылка или кнопка в body или header запустила модальное закрытие (а не только кнопки в footer).

Затем я напишу это решение в mix @JoshCrozier и @Katia ответы своим путем и улучшу окончательное решение:

Добавьте эту часть в Сценарии вашей страницы:

$('body').on('click','.modal .dismiss-modal', function() {
    var closeRelatedTarget = this;
    var $modal = $(closeRelatedTarget).closest('.modal');
    $modal.one('hide.bs.modal hidden.bs.modal', function(event) {
        $modal.data('closeRelatedTarget',closeRelatedTarget);
    });
    $modal.data('closeRelatedTarget','wait');
    $modal.modal('hide');
});
$('body').on('show.bs.modal','.modal', function(event){
    $(this).data('closeRelatedTarget','anElement');
    $(this).data('showRelatedTarget',event.relatedTarget);
});

Теперь легко использовать его с помощью простых обработчиков событий или Получить целевой элемент:

● Определить, что элемент ведьмы вызвал модальный показ на show и shown (встроенная функция Bootstrap):

 $('#MyModal').on('show.bs.modal', function (event) {
     console.log(event.relatedTarget);
 });

и

 $('#MyModal').on('shown.bs.modal', function (event) {
     console.log(event.relatedTarget);
 });

● Определить, что элемент ведьмы активировал модальный закрыть hidden

 $('#BuyModal').on('hidden.bs.modal', function (event) {
      if($(this).data('closeRelatedTarget')=='wait')
      {return;}

      console.log($('#MyModal').data('closeRelatedTarget'));
 });

● Определить, что элемент ведьмы вызывал модальное отображение даже после закрытия модальности

 console.log($('#MyModal').data('showRelatedTarget'));

● Определить, что элемент ведьмы вызывал модальный закрываться даже после закрытия модальности

 console.log($('#MyModal').data('closeRelatedTarget'));

Примечание.. Вместо свойства data-dismiss="modal" используйте мой класс modal-dismiss для каждого элемента модели, который вы можете закрыть модель, и вы хотите определить ее (не используйте оба modal-dismiss класс и data-dismiss="modal" вместе).

Пример: <a href="/more_info.html" class="dismiss-modal">More info</a>

Почему? Потому что data-dismiss="modal" закрывает модель и запускает скрыть и скрывать до того, как мы установим closeRelatedTarget.

Ответ 5

Мы думаем об этом. Это так же просто, как стандартный обработчик кнопок. Data-dismiss = "modal" отключит диалог, и мы все равно будем знать, что кнопка, в которой мы заинтересованы, была нажата.

$('#delete-file-modal').on('click','#delete-file-modal #confirm-delete-button', function (e) {
  e.preventDefault();
  console.log('confirmed delete');
  return false;
});