Question

背景我有一个弹出和显示输入表单的引导模式，如果用户进行更改并取消/关闭模式，确认框将识别它们将丢失更改。

模态在模态开始关闭时触发两个事件hide，在模态完全关闭时触发hidden。

我正在拦截hide事件：

.on('hide',function(){
    if(confirm('close'))
        return true;
    else
        return false;
});

如果我关闭方框并点击确定，模式将关闭。

如果我点击取消，模态将保持打开状态（这是正确的）但是我会在它不会继续默认事件后点击确定。

点击OK（有效）
点击取消（工作）
点击取消（失败）后点击确定

我也尝试了preventDefault();，但我无法弄清楚如何在取消操作后让事件继续。

可以在这里测试：

http://jschr.github.io/bootstrap-modal/

在控制台中输入：

$('#responsive').on('hide', function() { if(confirm('close)) return true; else return false;});

Answer 1

您使用的是什么版本的Bootstrap？

您是否将.on（＆＃39; hide＆＃39;）事件附加到模态元素？例如：

$('.modal').on('hide', function(){...});

我在JS Fiddle（http://jsfiddle.net/5kbXZ/）中使用Bootstrap 3中的模态示例标记测试了您的代码，它在Chrome Canary中为我工作。

Answer 2

在hide函数的bootstrap-modal.js第84行潜入模态管理器的源代码：

e && e.preventDefault();
e = $.Event('hide');
this.$element.trigger(e);
if (!this.isShown || e.isDefaultPrevented()) return (this.isShown = false); <-- 
this.isShown = false;
this.escape();
this.tab();

this.isShown设置为false导致一个常量循环，它应该设置为true，因为当你触发e.preventDefault（）时不会隐藏模态。所以修复是：

if (!this.isShown || e.isDefaultPrevented()) return (this.isShown = true);

在事件上返回false会阻止事件发生

2 个答案: