显示模态时未触发 Twitter 引导模态事件

Twitter Bootstrap Modal Event Not Fired When Modal is Shown

本文关键字：模态 事件 Twitter 显示      更新时间：2023-09-26

根据文档：

http://getbootstrap.com/javascript/#modals

它应该触发方法"show.bs.dropdown

"和"show.bs.dropdown"。但它没有：

http://jsfiddle.net/mQunq/3/

.HTML：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world</div>
    </div>
</div>

j查询：

// show.bs.modal doesn't work either
$('#myModal')
    .modal('show')
    .on('show.bs.modal', function() {
        alert('shown baby!');
    });

> 您需要先注册事件然后触发它

$('#myModal')
    .on('show.bs.modal', function() {
        alert('shown baby!');
    }).modal('show');

斯菲德尔

当它发生时

事件显示.bs.modal当模态也具有类"fade"时，不会触发。而show.bs.modal总是有效的。请参阅 https://github.com/twbs/bootstrap/issues/11793

.HTML：

<div class="modal fade" id="first" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world from first modal</div>
    </div>
</div>
<div class="modal" id="second" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">Hello world from second modal</div>
    </div>
</div>

j查询：

$('.modal').on('shown.bs.modal', function() {
    //fired only in second modal
    console.info('shown.bs.modal');
});
$('.modal').on('show.bs.modal', function() {
    //fired always
    console.info('show.bs.modal');
});


溶液

对于引导程序 v3.3.6，请将第 1010 行替换为：

that.$element // wait for modal to slide in

问题出在哪里

请看第 1006-1015 行：

  var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
  transition ?
    that.$dialog // wait for modal to slide in
      .one('bsTransitionEnd', function () {
        that.$element.trigger('focus').trigger(e)
      })
      .emulateTransitionEnd(Modal.TRANSITION_DURATION) :
    that.$element.trigger('focus').trigger(e)

如果没有转换（无淡入淡出类），事件 e 会立即触发（在此.$element）。对于过渡，我不确定确切的原因，但不知何故，来自函数 emulateTransitionEnd 的 bsTransationEnd 事件不是由 that.$dialog.one（） 处理的。但有了这个.$element，一切似乎都奏效了。

类似的事情也发生在我身上，我已经使用 setTimeout 解决了。

引导程序使用以下超时来完成显示：

c.TRANSITION_DURATION=300，c.BACKDROP_TRANSITION_DURATION=150，

所以使用 300 多个必须有效，对我来说 200 个是有效的：

$('#myModal').on('show.bs.modal', function (e) {
    setTimeout(function(){
        //Do something if necessary
    }, 300);                        
})

你忘记了显示的"n"

$(document).ready(function(){
    $('#myModal')
.modal('show')
.on('shown.bs.modal', function() {
    alert('shown baby!');
});
});

使用文档而不是自定义选择器。显示.bs.modal和show.bs.modal都可以正常工作

$(document).on('shown.bs.modal', '.modal', function() {
    alert();
});

如果有人偶然发现这个问题，请确保在触发模态toggle之前挂上 on hidden/shown 事件。也就是说，声明这一点：

$("#selector").on("hidden.bs.modal", function () {
    // do the right thing
});

在调用模态的切换之前，例如：

("#selector").modal("toggle");

我知道这是基本的，但在复杂的代码中它发生了。

我找到了一个适用于.fade转换的解决方案：

$(document).on($.support.transition.end, '.modal.fade.in', function(e) {
  var $target = $(e.target);
  if ($(e.target).is(".modal-dialog")) {
    console.log("Modal Shown")
  }
});
$(document).on($.support.transition.end, '.modal.fade', function(e) {
  var $target = $(e.target);
  if (!$target.is(".modal.fade.in") && !$target.is(".modal-dialog")) {
    console.log("Modal Hidden")
  }
});

如果您的模态是动态创建的，请选择最接近的静态父元素，并将模态添加为参数，以便引导模态事件正常工作：

/* body is static, .modal is not */
$("body").on('shown.bs.modal', '.modal', function() {
    alert('shown');
});

$("body").on('hidden.bs.modal', '.modal', function() {
    alert('hidden');
});

$("body").on('show.bs.modal', '.modal', function() {
    alert('show');
});

$("body").on('hide.bs.modal', '.modal', function() {
    alert('hide');
});
相关文章：