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

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”分配给它们，就可以轻松地在覆盖层内添加更多关闭元素。这些元素可以在叠加层内以您喜欢的任何方式设置样式和位置。

如果您为 close 配置变量提供值，则 close 元素不会自动生成，您需要自己定义关闭元素。

所以如果你放<a href="#" class="cancel close">Cancel</a>它应该可以工作。