Question

我正在显示一个iframe叠加层，其z-index为9999，宽度和高度均为100％。 iframe中的实际div只有620px宽。问题是，我无法通过简单地点击div之外来隐藏iframe。这是我现在使用的代码

$(document).click(function() {
    alert("hide iframe");
});
$(".myDivInsideMyIframe").click(function(e) {
    e.stopPropagation();
    return false;      
});

如何通过点击里面的div之外隐藏我的iframe？

的jsfiddle： http://jsfiddle.net/H5Vpd/7/

为了使我想要做的更清楚：

小部件来自我的域名，将嵌入其他人。我无法控制其他域上的内容，但我认为如果用户点击我的iframe中的div之外会很好，它会隐藏iframe

Answer 1

您可能正在寻找this。如果iframe的src指向同一域中的资源，出于安全原因，这将仅工作。

$(document).mouseup(function (e)
{
    // Grab your div
    var foo = $('iframe').each(function() {
        return $('.myDivInsideMyIframe', this.contentWindow.document || this.contentDocument);
    });

    if (!foo.is(e.target) && foo.has(e.target).length === 0) {
        // If the target of the click isn't the div
        // nor a descendant of the div

        // Hide the iframe
        $('iframe').hide();
    }
});

Answer 2

也许试试：

$("iframe div:not(.myDivInsideMyIframe)").click(function() {
  $(iframe).hide();     
});

Answer 3

我建议您使用jQuery Fancybox plugin在您的网站上显示叠加层。它不仅会为您处理所有的居中和点击事件，而且还支持开箱即用的iframe。

$.fancybox({
  href: 'http://google.com/'
});

在此处查看其文档：http://fancyapps.com/fancybox/#docs

Answer 4

你可以像这样使用all + not选择器：

$("*:not(.div2hide)").click(function() {
  $(".div2hide").hide();     
});

如何通过点击div之外的任何地方来隐藏div？

4 个答案: