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

Can you change the iframe to a div? [Iframes can't capture click events](http://stackoverflow.com/a/1609808/425809) so if you cahnge it to a div, you can just capture the click for the div and close it there. — Richard, Aug 20 '13 at 20:28
Can you provide a jsfiddle with your current code for us to see? — Graham Swan, Aug 20 '13 at 20:28
@Vector is on a different domain but that domain is also my domain. I'm trying to make a widget that overlays. Should I write up some code on that side? — goo, Aug 20 '13 at 20:29
i don't think you can attach an a event to an individual item within an iframe if it's not hosted on the same domain. It runs completely seprately with it's own javascript, css etc. You could overlay a div with no background, higher `z-index`, on top of it and assign a click event to that — Kevin Lynch, Aug 20 '13 at 20:42
I'd have to research it and get back to you. Personally i've always kept the control within the main page (in case iframe ever changes) and use divs as overlays to dicate what i do. I've mocked up a very basic example below. — Kevin Lynch, Aug 20 '13 at 20:54
HTML5 iframe has an `allow scripts` attribute, this may be a way forward. It could potentially be a security threat but may be an idea if the right precautions are taken — Kevin Lynch, Aug 20 '13 at 21:03

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

You might be looking for this. This would only work if the src of the iframe points to a resource in the same domain, for security reasons.

$(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();
    }
});

edited May 23 '17 at 12:28

Community

1
1

answered Aug 20 '13 at 20:29

federico-t

12,014
19
67
111

If you need to use code such as this to hide an overlay, I would argue there are simpler ways to handle overlays (ie. with a plugin). – Graham Swan Aug 20 '13 at 20:34
@Jon What about now? (It's hard to test it because of the iframe). – federico-t Aug 20 '13 at 21:01

score 0 · Answer 2 · answered Aug 20 '13 at 20:29

0

maybe try:

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

answered Aug 20 '13 at 20:29

Maciej Czekaj

64
9

score 0 · Answer 3 · answered Aug 20 '13 at 20:32

0

I recommend using the jQuery Fancybox plugin to display overlays on your site. Not only will it handle all of the centering and click events for you, it also supports iframes out of the box.

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

View its documentation here: http://fancyapps.com/fancybox/#docs

answered Aug 20 '13 at 20:32

Graham Swan

4,818
2
30
39

I'm not sure about this one.. Seems kind of 'heavy' for a widget. But thank you – goo Aug 20 '13 at 20:46
@Jon You said, "I'm trying to make a widget that overlays." This already exists, and since it solves your problem exactly as intended, you should use something that's already tested and already in widespread use. The entire purpose of Fancybox is to display content (iframes, elements, ajax results) in modal overlays. – Graham Swan Aug 20 '13 at 21:15
yes, I familiar with fancybox, but this doesn't solve my problem.. but thank you. – goo Aug 20 '13 at 21:25

score 0 · Answer 4 · answered Aug 20 '13 at 21:06

0

you can use the all + not selector like this:

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

answered Aug 20 '13 at 21:06

Gildas.Tambo

22,173
7
50
78

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

4 Answers4