1

I have this JSFiddle.

I have Bootstrap Modals as in this example, and I need to intercept their Open/Show event. But none of the suggestions mentioned in this thread work for me. Am I missing something?

I tried the following:

// Listener - Show Event Interception

    // NONE OF THE FOLLOWING WORK
        $('#modal').on('shown.bs.modal', function (e) {
            alert('Modal opened 1');
        });
        $('#modal').on('shown', function (e) {
            alert('Modal opened 2');
        });  
      $(window).on('shown.bs.modal', function() { 
          alert('Modal opened 3');
        });

My Modal looks like this (opened with $('#modal').show();):

<div class="modal modal-dialog" id="modal" tabindex="-1" role="dialog"  aria-hidden="true" >  
  <div class="modal-content" style="margin:0 auto;">
     ...
  </div>
</div>

Update

The immediate problem is that I'm using show() rather than modal('show'). However I also tried to intercept using $(document).on('show', function(evt) {..} and failed.

New approach just to intercept a jQuery show() event:

$(document).on('show', function(evt) {
    if($(evt.target).attr('role') != null && $(evt.target).attr('role') == 'dialog') { 
       alert('Intercepted Dialog Show'); 
    }
});
halfer
  • 19,824
  • 17
  • 99
  • 186
gene b.
  • 10,512
  • 21
  • 115
  • 227

1 Answers1

2

Your fiddle shows the modal via jQuery's .show method which essentially makes a hidden element visible. Therefore no events will trigger.

To trigger the shown.bs.modal event, and any event related to the modal for that matter, you'll want to use the modal methods particularly .modal('show') to show the modal accordingly.

$('#opendlg').click(function() {
    $('#modal').modal('show');
});
Cue
  • 2,699
  • 1
  • 12
  • 13
  • Thanks, do you know why I can't intercept as `$(document).on('show', function(evt) {...}`? I tried that as well just to intercept `show` and I couldn't. I will update the Fiddle with an exampe. – gene b. Jan 16 '19 at 15:50
  • 1
    The correct event when binding to document is `$(document).on('show.bs.modal', '#modal', function(evt) { ... })` – Cue Jan 16 '19 at 15:54