Javascript 显示模式时未激发Twitter引导模式事件
根据文件: 它应该触发方法“show.bs.dropdown”和“show.bs.dropdown”。但事实并非如此: HTML:Javascript 显示模式时未激发Twitter引导模式事件,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,根据文件: 它应该触发方法“show.bs.dropdown”和“show.bs.dropdown”。但事实并非如此: HTML: 您需要先注册事件,然后触发它 $('#myModal') .on('show.bs.modal', function() { alert('shown baby!'); }).modal('show'); 您忘记了屏幕上的“n” 类似的事情也发生在我身上,我用setTimeout解决了这个问题 引导正在使用以下超时完成显示:
您需要先注册事件,然后触发它
$('#myModal')
.on('show.bs.modal', function() {
alert('shown baby!');
}).modal('show');
您忘记了屏幕上的“n”
类似的事情也发生在我身上,我用setTimeout解决了这个问题 引导正在使用以下超时完成显示: c、 过渡持续时间=300,c.c.过渡持续时间=150 因此,使用300多个必须有效,对我来说200个有效:
$('#myModal').on('show.bs.modal', function (e) {
setTimeout(function(){
//Do something if necessary
}, 300);
})
当它发生时
当modal还具有“淡入淡出”类时,不会触发所示事件。bs.modal。而show.bs.modal始终有效。
看
HTML:
解决方案 对于引导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会立即触发(在该.$元素上)。
对于transition,我不知道确切的原因,但不知何故,来自函数emulateTransitionEnd的BSTransitionEnd事件并不是由它来处理的。$dialog.one()。但是有了这个.$元素,一切似乎都正常了。使用文档而不是自定义选择器。show.bs.modal和show.bs.modal都可以正常工作
$(document).on('shown.bs.modal', '.modal', function() {
alert();
});
如果有人无意中发现此问题,请确保在启动模式的
切换之前,挂起隐藏的/显示的事件。即声明:
$("#selector").on("hidden.bs.modal", function () {
// do the right thing
});
在调用模式切换之前,例如:
("#selector").modal("toggle");
我知道这是最基本的,但在复杂的代码中会发生。我找到了一个解决方案,可以使用。淡入淡出转换:
$(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');
});
啊,好吧,有道理。我不知道我必须自己注册,我以为是核心插件触发了它。我认为这是以前版本的工作方式。这个答案需要更多的关注。我遇到了一个类似的问题,即基于某些条件强制模式打开。我花了一点时间才发现这是解决问题的方法。同意@Shaazaam的说法-关于stackoverflow,肯定有十几个答案没有解决注册和触发要求。还要注意的是,在触发show.bs.modal事件时不应该显示模态。要处理的正确事件显示为.bs.modal。后者等待CSS转换完成。两者都是事件<代码>显示.bs.modal
立即开火<代码>显示.bs.modal
在模式淡入后激发。@ShellZero 150-取决于模式的淡入/淡出时间。默认值为150毫秒。为了安全起见,我将160毫秒用于setTimeout
。
$(document).on('shown.bs.modal', '.modal', function() {
alert();
});
$("#selector").on("hidden.bs.modal", function () {
// do the right thing
});
("#selector").modal("toggle");
$(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');
});