jquery - How do you hide a div by clicking anywhere outside that div?

Question

I'm displaying an iframe overlay with a z-index of 9999 with 100% width and height. The actual div inside the iframe is is only 620px wide. The problem is, I can not hide the iframe by simply click outside that div. Here's the code I'm using now

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

How can I hide my iframe by click outside the div thats inside?

---

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

---

To make what I'm trying to do clearer:

The widget is coming from my domain and will be embedded on others. I can't control whats on other domain but I think it'd be nice if the user clicks outside the div thats in my iframe, it would hide the iframe

Answer 1

你可能正在寻找这个。出于安全原因，这仅在 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

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

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

Answer 3

也许尝试：

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

Answer 4

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

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

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