bootstrap how to detect which button closed a modal dialog on 'hidden_modal_bs' event func?

Question

I have a welcome type bootstrap-modal on homepage that shows three buttons, each one of them should load different pages

Here it is a relevant excerpt of the 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

And here my 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';
    }
});

(Note: This JS obviously doesn't work. It's just my last attempt)

So , the question is: How can I find which button has been pressed from inside the hidden.modal.bs function ?

Answer 1

Instead of hidden.bs.modal, have a look at hide.bs.modal, which is fired before the dialog is closed.

And instead of looking at e, try looking at document.activeElement (like document.activeElement.innerText, or document.activeElement.id).

Answer 2

Normally the case that the user close the modal dialog using the ESC keyboard key is equally to the case that the user close it using a backdrop (click on background), so the only thing that I was need to detect is if the user close the modal dialog using the Close button or not ?

//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');
    }
});

Note: This script using hide.bs.modal and not hidden_modal_bs. the hidden event fire after the modal dialog already been closed, in this case you do not need to care how it close, normally you need to detect how it close before you approve to close the dialog (using return true or false in the hide.bs.modal event).

Answer 3

For Bootstrap 3.3.4 and earlier, for the hide.bs.modal and hidden.bs.modal events, the event object passed to the handlers contains no information about the original source of the event.

There is an issue for this on bootstrap project page: #15408: Get cause of hidden.bs.modal event which has been rolled into a more generic ticket (Bootstrap issue #15393) for forwarding the original trigger event down the queue (for the 4.0 milestone).

As a side note, I have used the following workaround(using a variable to store the original event trigger):

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='';
});

In your case, you'll have to add the following event handlers:

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

Please note that as your buttons have the data-dismiss="modal" attribute, the modal will be hidden when you click the buttons. However, the click handlers will kick in and set eventTrigger before the modal is hidden, that is, before the hidden.bs.modal event, so your handler for the event can be a simple 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
    }
});

Answer 4

The e that is passed is the event object, you can use e.target to get the HtmlElement that was pressed to trigger that event.