如何通過點擊該div外的任何位置來隱藏div？

我正在顯示一個帶有100％寬度和高度的9999 z-索引的iframe疊加層。 iframe中的實際div只有620px寬。問題是，我無法通過在該div外部單擊來隱藏iframe。這裏是我現在使用的代碼如何通過點擊該div外的任何位置來隱藏div？

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

如何隱藏我的iframe通過點擊外部div那裏面？

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

爲了什麼，我試圖做更清晰的：

小部件是從我的網域，將被嵌入別人。我無法控制其他域上的內容，但我認爲如果用戶在我的iframe中單擊div之外時會很好，它會隱藏iframe

來源

2013-08-20 goo

是在同一個域的iframe？ – Vector

你可以改變iframe到div嗎？ [iframes無法捕獲點擊事件]（http://stackoverflow.com/a/1609808/425809），所以如果你將它鎖定到div，你可以捕獲div的點擊並關閉它。 – Richard

你可以提供一個你當前的代碼jsfiddle供我們看嗎？ –

您可能正在尋找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(); 
    } 
});

來源

2013-08-20 20:29:31 federicot

如果您需要使用這樣的代碼來隱藏覆蓋圖，我會爭辯說有更簡單的方法來處理覆蓋圖（即使用插件）。 –

不適合我，但是謝謝 – goo

@Jon現在呢？（由於iframe，很難測試它）。 – federicot

也許嘗試：

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

來源

2013-08-20 20:29:44

不是爲我工作，但感謝:( – goo

給我們更多的代碼，所以我們會盡力;） –

我建議使用jQuery Fancybox plugin顯示在您的網站覆蓋。它不僅會爲您處理所有居中和點擊事件，還支持開箱即用的iframe。

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

這裏查看其文檔：http://fancyapps.com/fancybox/#docs

來源

2013-08-20 20:32:58

我不知道這一個..似乎對微件一種「重」的。但是，謝謝 – goo

@Jon你說過，「我正在嘗試製作一個疊加的小部件。」這已經存在，並且由於它完全按照預期解決了您的問題，因此您應該使用已經過測試並已廣泛使用的內容。 Fancybox的全部目的是在模態疊加中顯示內容（iframe，元素，ajax結果）。 –

是的，我熟悉fancybox，但這並不能解決我的問題..但謝謝你。 – goo

可以使用所有+沒有選擇器這樣的：

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

來源

2013-08-20 21:06:20

如何通過點擊該div外的任何位置來隱藏div？

回答

相關問題