I have a program (pgmA) that creates a basic page with 4 vertical options on the left. When the user clicks one of the options, a program (pgmB) will run in an iframe, retrieve information from a database and display some of the information along with 4 horizontal tabs. The user can then click a tab and a popup is displayed with more information. To hide the popup, the user can click "close" or anywhere within the iframe (pgmB). The below code is used to hide the popup when the user clicks within the iframe (pgmB):

$(document).mouseup(function(e) {
    var cont = $('#PopUpInformation');
    if (!cont.is(e.target) &&cont.has(e.target).length === 0) {
        cont.hide();
    }
});

This part works great but I'd also like the user to be able to click anywhere on the page (pgmA) to also hide the popup which is what I can't figure out. Help...

I have a program (pgmA) that creates a basic page with 4 vertical options on the left. When the user clicks one of the options, a program (pgmB) will run in an iframe, retrieve information from a database and display some of the information along with 4 horizontal tabs. The user can then click a tab and a popup is displayed with more information. To hide the popup, the user can click "close" or anywhere within the iframe (pgmB). The below code is used to hide the popup when the user clicks within the iframe (pgmB):

$(document).mouseup(function(e) {
    var cont = $('#PopUpInformation');
    if (!cont.is(e.target) &&cont.has(e.target).length === 0) {
        cont.hide();
    }
});

This part works great but I'd also like the user to be able to click anywhere on the page (pgmA) to also hide the popup which is what I can't figure out. Help...

• javascript
• jquery
• iframe

• 1 Would it not be better to rename the title to "Detect click outside iframe"? seeing as that's your question? – iConnor Commented Oct 11, 2013 at 15:34

1 Answer 1

I think this could be possible with parent, I'm guessing that the code in your question is inside the <iframe/>. so, you could try something like this.

$(document).add(parent.document).mouseup(function(e) {
    var cont = $('#PopUpInformation');
    if (!cont.is(e.target) && cont.has(e.target).length === 0) {
        cont.hide();
    }
});