当表单发生更改时，防止 bootstrap-3 模态关闭 [英] Prevent bootstrap-3 modal from closing when the form has changes

问题描述

我试图阻止 bootstrap-3 模式在模式内的表单发生更改时在没有警告的情况下关闭.但是，当我收听模态框触发的事件并返回 false 时，它​​将阻止模态框永远关闭.这是我的代码:

I'm trying to prevent the bootstrap-3 modal from closing without warning when there are changes made to the form inside the modal. However when I listen to the events fired by the modal and return false it will prevent the modal from closing ever. Here's my code:

$(function() {
    $('body').live('shown.bs.modal', '#quickbutton-create', function () {
        $(this).find('#quickbutton-create form').monitor();
    });

    $('body').live('hide.bs.modal', '#quickbutton-create', function () {
        if ($(this).find('#quickbutton-create form').monitor('has_changed')) {
            if (!confirm('Are you sure?')) {
                return false;
            }
        }
    });
});

简而言之，在这种情况下；如何防止模态仅关闭一次.

So in short, in this case; how do I prevent the modal from closing just this once.

推荐答案

好吧，我想通了，我需要 event.preventDefault() 而不是 return false

Ok so I figured it out, instead of return false I needed to event.preventDefault()

jsfiddle 在这里:http://jsfiddle.net/ACYBv/1/

jsfiddle here: http://jsfiddle.net/ACYBv/1/

$(function() {
    $('.modal').on('shown.bs.modal, loaded.bs.modal', function(e) {
        // set form state
        $(this).data('form-data', $(this).find('form').serialize());
    });

    $('.modal').on('hide.bs.modal', function(e) {        
        // check if the form data was changed since the modal was openened
        if($(this).data('form-data') != $(this).find('form').serialize()) {
            if(!confirm('you sure??')) {
                e.preventDefault();
            }
        }
    });
});

这篇关于当表单发生更改时，防止 bootstrap-3 模态关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！