Bootstrap 模态显示事件未被任何事件侦听器拦截

Question

我有this JSFiddle。

我有这个例子中的 Bootstrap Modals，我需要拦截它们的 Open/Show 事件。但是this thread 中提到的任何建议都不适合我。我错过了什么吗？

我尝试了以下方法：

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

我的 Modal 看起来像这样（用$('#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>

更新

当前的问题是我使用的是show() 而不是modal('show')。但是我也尝试使用$(document).on('show', function(evt) {..} 进行拦截，但失败了。

拦截 jQuery show() 事件的新方法：

$(document).on('show', function(evt) {
    if($(evt.target).attr('role') != null && $(evt.target).attr('role') == 'dialog') { 
       alert('Intercepted Dialog Show'); 
    }
});

Answer 1

您的小提琴通过 jQuery 的 .show 方法显示模式，该方法实质上使隐藏元素可见。因此不会触发任何事件。

要触发shown.bs.modal 事件，以及任何与模态相关的事件，您需要使用模态方法，尤其是.modal('show') 来相应地显示模态。

$('#opendlg').click(function() {
    $('#modal').modal('show');
});