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

Вот соответствующий отрывок из 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?

12
mtsdev 19 Апр 2014 в 16:16

4 ответа

Лучший ответ

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

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

14
robsch 6 Дек 2017 в 14:08

Обычно случай, когда пользователь закрывает модальное диалоговое окно с помощью клавиши клавиатуры 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).

5
Roy Shoa 13 Янв 2016 в 13:38

Для 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
    }
});
3
Samveen 22 Мар 2016 в 08:34

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

-1
Brunis 19 Авг 2014 в 14:28