Question

我有一个编辑表单，我使用Jquery Tools显示为叠加层。

在我的对象列表视图页面上，每个对象都有<a href="#" class="edit_button">Edit</a>。所有这些都附加到相同的叠加形式：

        $(".edit_button[rel]").overlay({ top: '5px',
            fixed: false,

            mask: {
                color: '#ebecff',
                loadSpeed: 200,
                opacity: 0.9
            }
        });

编辑表单叠加层包含一个取消按钮：

<a href="#" class="cancel">Cancel</a>

如何让此取消按钮关闭叠加层？似乎我可以访问Overlay API对象的唯一方法是使用创建它的选择器 - 在本例中为$('.edit').each()，因为我不知道哪一个触发了叠加层。

我真正想要的是：

$('.cancel').click(function(e){
    var target = e.originalTarget || e.srcElement;
    $(target).parent().parent().getOverlay().close();
});

但这不起作用。

有没有办法可以关闭叠加而不做：

$(".edit_button[rel]").each(function() {
    $(this).overlay().close();
});

Answer 1

您可以轻松添加更多关闭   覆盖层内的元素只需通过   指定CSS类名称“close”   给他们。这些元素可以设计风格   并以任何你喜欢的方式定位   叠加。

如果您提供收盘价值   配置变量，关闭   元素不是自动生成的   需要定义关闭元素   自己。

因此，如果你放<a href="#" class="cancel close">Cancel</a>它应该有用。

Answer 2

使用JavaScript关闭模态（自动而不点击关闭按钮）：

$('#ID OF YOUR MODAL a.close').trigger("click");

或者如果你在iframe（像我一样），请放置父级。在$之前。

Answer 3

扩展Kras提供的内容。如果您一次只打开一个叠加层（逻辑上您会这样做），那么您可以使用这种更通用的方法：

  $('a.close').trigger('click');

我希望这有帮助！

jQuery工具：如何关闭叠加层？

3 个答案: