Question

首先，我想说我根本不是一个JavaScript专家..

我正在测试Ray Stone的leanModal pluggin。我可以使用插件打开和关闭模态。

我在模态div中添加了一个表单。我现在要做的是在用户点击提交按钮时关闭模式（正如您在项目网站中看到的那样）。

问题是我不像往常一样处理表单。我使用jQuery获取数据，然后使用$.ajax()向服务器请求。这是我的代码：

 $(function() {
     $('#add-user').submit(function() {
         $.ajax({
             type: 'post',
             url: '***',
             data: '***',
             contentType: 'application/json',
             dataType: 'json'
         });
         $(this).closest('form').find("input[type=text], textarea").val("");
         $(this).leanModal.closeModal('#cp');
         return false;
     }); 
});

其中 #add-user是打开模态的链接。 #cp是模态的div id。

在这种情况下，div会关闭，但div后面的模糊不会消失，直到用户点击。效果与使用$('#cp').remove();相同如何在发送请求时完全关闭div？提前致谢

更新：我的代码可以使用jsFiddle here。一些CSS规则被遗漏了，我没有提到AJAX请求，但我认为主要代码就在那里。

Answer 1

首先$.ajax()是异步的，因此以下行

$(this).closest('form').find("input[type=text], textarea").val("");
$(this).leanModal.closeModal('#cp');

即使您的查询不成功，也会执行

你最好做

$.ajax({
    ...
    success: function () {
        $(this).closest('form').find("input[type=text], textarea").val("");
        $(this).leanModal.closeModal('#cp');
    }
});

其次，在checking the source之后，我认为你应该使用

$.leanModal.close_modal('#cp');

$("#lean_overlay")似乎是你要摆脱的“模糊”元素最终你可以做$("#lean_overlay").remove()，但插件似乎已经管理好了

最后你应该

$(function() {
    $('#add-user').submit(function(e) {
        e.preventDefault();
        $.ajax({
            type: 'post',
            url: '***',
            data: '***',
            contentType: 'application/json',
            dataType: 'json',
            success: function () {
                $('#add-user :input:not(:submit)').val('');
                $.leanModal.close_modal('#add-user');
            }
        });
        return false;
    }); 
});

用形式隐藏leanModal div

1 个答案: