bootstrap, как определить, какая кнопка закрыла модальный диалог в функции события «hidden_modal_bs»?

У меня есть загрузочная модальная форма приветствия на домашней странице, которая показывает три кнопки, каждая из которых должна загружать разные страницы.

Вот соответствующий отрывок из HTML

<div class="modal fade" id="welcomeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
  <div class="modal-dialog" >
    <div class="modal-content" ;">
      <div class="modal-header">
        <h3 class="modal-title" id="ModalLabel">Welcome to Here</h3>
      </div>
      <div class="modal-body" style='height: 90.5%;'>
        <span style="display:td;text-align;center;">Blah Blah BLah</span>
      </div>
      <div class="modal-footer">
        <div class="btn-group">
          <a id='taketour' class="btn btn-default btn-lg" data-dismiss="modal" ,aria-hidden="true" href="/tour">Take a tour</a>
          <a id='register' class="btn btn-default btn-lg" data-dismiss="modal" aria-hidden="true" href="/add">Register</a>
          <a id='login' class="btn btn-default btn-lg" data-dismiss="modal" aria-hidden="true" href="/login">Login</a>
        </div>
      </div>
    </div>
  </div>
</div

А вот и мой JS

$(window).load(function(){
    $('#welcomeModal').modal('show');
});

$('#welcomeModal').on('hidden.bs.modal', function (e) {
    if (e.id == 'taketour') {
        $(window).location=e.href;
    }
    if (e.id == 'login') {
        $('#welomeModal').remote='element-login';
    }
});

(Примечание: этот JS явно не работает. Это просто моя последняя попытка)

Итак, вопрос: как узнать, какая кнопка была нажата внутри функции hidden.modal.bs?


person mtsdev    schedule 19.04.2014    source источник
comment
Вы нашли решение?   -  person kabra    schedule 26.07.2014
comment
PS Мне нужно определить, что это data-dismiss=modal или что-то еще.   -  person kabra    schedule 27.07.2014
comment
Я справился с этим, заставив кнопки вызывать события, например: $(".modal .modal-footer .btn").click(function() { $(this).closest(".modal").trigger($.Event('buttonclick.bs.modal', this)); });   -  person freedomn-m    schedule 14.06.2017


Ответы (4)


Вместо hidden.bs.modal взгляните на hide.bs.modal, который запускается перед закрытием диалога.

И вместо того, чтобы смотреть на e, попробуйте посмотреть на document.activeElement (например, document.activeElement.innerText или document.activeElement.id).

person wilsonsmith    schedule 30.09.2015
comment
Это не работает на iPhone 6. ActiveElement имеет значение null - person Captain Fantastic; 06.11.2020

Обычно случай, когда пользователь закрывает модальное диалоговое окно с помощью клавиши ESC, равнозначен случаю, когда пользователь закрывает его с помощью фона (щелкает по фону), поэтому единственное, что мне нужно было обнаружить, это если пользователь закрывает окно. модальный диалог с помощью кнопки «Закрыть» или нет?

//This event is fired immediately when the hide instance method has been called
$('#moduleWindow').on('hide.bs.modal', function (event) {

    //The default close button class is "close", if you change it please change the selector
    if ( $(document.activeElement).hasClass('close') ) {
        console.log('The user close the modal dialog using the Close Button');
    } else {
        console.log('The user close the modal dialog using Backdrop or Keyboard ESC key');
    }
});

Примечание. В этом сценарии используется hide.bs.modal, а не hidden_modal_bs. скрытое событие срабатывает после того, как модальное диалоговое окно уже закрыто, в этом случае вам не нужно заботиться о том, как оно закрывается, обычно вам нужно определить, как оно закрывается, прежде чем вы одобрите закрытие диалогового окна (используя return true или false в событии hide.bs.modal) .

person Roy Shoa    schedule 13.01.2016
comment
Помните, что вызов .hide() вручную также будет рассматриваться как нажатие escape (поскольку для document.activeElement установлено значение body). - person Jan Drábek; 14.07.2017

В Bootstrap 3.3.4 и более ранних версиях для событий hide.bs.modal и hidden.bs.modal объект event, передаваемый обработчикам, не содержит никакой информации об исходном источнике события.

Для этого есть проблема на странице проекта начальной загрузки: #15408: Получить причину события hidden.bs.modal, который был преобразован в более общий билет (Bootstrap issue #15393) для пересылки исходного триггерного события по очереди (для вехи 4.0).

В качестве примечания я использовал следующий обходной путь (используя переменную для хранения исходного триггера события):

var eventTrigger='';

$("#myModal").submit(function(evt){
    eventTrigger=evt.type;
    // Do submit stuff
});

$('#myModal').on('hidden.bs.modal', function (evt) {
    switch(eventTrigger) {
        case "submit": // Submit. Do something
            ...
            break:
        default: // No submit (Esc key, close button, programmatic 'hide'
    };
    eventTrigger='';
});

В вашем случае вам нужно будет добавить следующие обработчики событий:

$('#taketour').on( 'click', function () { eventTrigger='taketour'; } );
$('#register').on( 'click', function () { eventTrigger='register'; } );
$('#login').on( 'click', function () { eventTrigger='login'; } );

Обратите внимание, что поскольку ваши кнопки имеют атрибут data-dismiss="modal", модальное окно будет скрыто при нажатии кнопок. Однако обработчики click сработают и установят eventTrigger до того, как modal будет скрыто, то есть до события hidden.bs.modal, поэтому ваш обработчик события может быть простым switch:

$('#welcomeModal').on('hidden.bs.modal', function (e) {
    switch(eventTrigger) {
        case 'taketour':
            $(window).location=e.href;
            break; // this may be redundant, but I'm unsure.
        case 'login':
            $('#welomeModal').remote='element-login';
            break;
        case 'register':
            // do register magic
            break;
        default:
            // handle unexpected user behaviour
    }
});
person Samveen    schedule 22.03.2016

Передаваемый e является объектом события, вы можете использовать e.target для получения HtmlElement, который был нажат для запуска этого события.

person Brunis    schedule 19.08.2014
comment
Это неправда, event.target во всех случаях является модальным. - person Rubens Mariuzzo; 25.03.2015