![](/img/trans.png)
[英]Bootstrap 3 - Event shown.bs.collapse or shown.bs.modal not fired if the accordion is inside a modal
[英]Twitter Bootstrap Modal Event Not Fired When Modal is Shown
根据文件:
http://getbootstrap.com/javascript/#modals
它应该触发方法“show.bs.dropdown”和“shown.bs.dropdown”。 但它没有:
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>
jQuery的:
// 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');
当modal也有类“淡入淡出”时,不会触发事件显示 .bs.modal。 而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>
jQuery的:
$('.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');
});
对于bootstrap v3.3.6,将line 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)
class) the event is triggered right away (on that.$element). 没有转换(没有类),事件被触发(在那个。$元素上)。 event from function is not handled by . 有了转换,我不确定为什么,但不知何故来自函数的事件不会被处理 。 , everything seem to work. 但有了 ,一切似乎都有效。
类似的事情发生在我身上,我用setTimeout解决了。
Bootstrap使用以下超时来完成显示:
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
之前挂钩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")
}
});
如果您的模态是动态创建的,请选择最接近的静态父元素,并将您的模态作为参数添加到bootstrap模态事件中:
/* 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');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.