Asp.Net MVC/jQuery 工具覆盖：如何在 ajax 返回中关闭它

Question

我在与您的叠加层一起显示的弹出窗口中有一个 Ajax 表单。我通过 ajax 提交弹出窗口，如果 ajax 调用成功，我需要关闭覆盖。

这是我目前的 JS 代码：

<script type="text/javascript">
    $(function () {
        // Handle form submit ...
        $("#AddVariableForm").live("submit", function (event) {
            event.preventDefault();
            var form = $(this);
            $.validator.unobtrusive.parse('#AddVariableForm');
            $.ajax({
                url: form.attr('action'),
                type: "POST",
                data: form.serialize(),
                success: function (data) {
                    if(data.Success){
                        $("#adm-form-addVariable").data("overlay").close();
                    }
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert("Error '" + jqXhr.status + "' (textStatus: '" + textStatus + "', errorThrown: '" + errorThrown + "')");
                },
                complete: function () {
                    alert('complete');
                }
            });
            return false;
        });
    });

</script>

问题是它目前没有关闭任何东西。我仔细检查了 chrome 调试模式，它出现在方法中，但什么也没做。我也检查了，没有 JS 错误。

我试过了

$("#adm-form-addVariable").overlay({ api: true }).close()

但同样的问题。

我是这样声明的：

   $(".adm-btn-overlay-trigger[rel]").overlay(
        {
            mask: {
                color: '#111',
                loadSpeed: 300,
                opacity: 0.9
            },

            closeOnClick: true
        }
    );

如果我这样做：

$("#adm-form-addVariable").overlay({ api: true }).isOpened()

我得到一个未定义的。

我做错了什么？

Answer 1

我很确定您需要在触发元素上调用 close，而不是覆盖：

http://jsfiddle.net/Fwzwc/2/

在你的情况下$(".adm-btn-overlay-trigger[rel]").overlay().close();

免责声明：我以前从未使用过 jquery 工具，但正如您在我的 js fiddle 中看到的那样，它似乎可以工作。

更新：要使用多个触发器，您似乎需要找到打开叠加层的确切触发器。有关此示例，请参阅 http://jsfiddle.net/Fwzwc/3/。

归结为找到覆盖 div 的 id，然后在 rel=overlayId: 的触发器上调用 .overlay().close()：

$("img[rel='#" + overlayId + "']").overlay().close();