Fade popup when user clicks anywhere in the document

Question

I need was when a popup comes and user clicks any where in the document except the popup, the popup should fadeout.

I have tried out with target.attr method, but failed in Mozilla.

IS there any Idea ? Thanks in Advance

score 2 · Accepted Answer · edited May 23 '17 at 11:49

2

You can use the jQuery fadeout method and one method.

Something like :

jQuery("#yourpoup").click(function(){ return false; });
jQuery(document).one("click", function() { jQuery("#yourpoup").fadeOut(); });

According to this question, using this is better then using bind.

edited May 23 '17 at 11:49

Community

1
1

answered Jun 12 '12 at 15:10

eric.itzhak

15,752
26
89
142

i need was, fadeout when user clicks anywhere in the body rather than the popup. – Surjith S M Jun 12 '12 at 15:12
You have a typo: "one" instead of "on". I tried to fix it, but since it's only one char (but an important one!), Stackoverflow won't let me! – Melanie Jun 12 '12 at 15:23
No it should be one, check the provided link. – eric.itzhak Jun 12 '12 at 15:29
OK, the error was in the description, not the code! :) Thanks, I wasn't aware of this useful method! – Melanie Jun 12 '12 at 17:41

score 0 · Answer 2 · answered Jun 12 '12 at 15:13

There is also a JQuery plugin for click outside, this will allow you to handle the click even for everything BUT the pop up.

http://benalman.com/projects/jquery-outside-events-plugin/

$("#yourpopup").bind( "clickoutside", function(event){
$(this).fadeOut(500);
});

score 0 · Answer 3 · edited May 23 '17 at 11:55

0

If your pop-up is a JQuery Dialog, you can see this thread:

jQuery UI - Close Dialog When Clicked Outside

edited May 23 '17 at 11:55

Community

1
1

answered Jun 12 '12 at 15:14

Melanie

1,198
2
17
42

score 0 · Answer 4 · answered Jun 12 '12 at 15:31

Use jquery as example, assumed $popup is the your popup element

$('body').click(function(){
    // hide the popup here
});

$popup.click(function(e) {
    // do something here if needed
    e.stopPropagation();
});

The key is when click in the popup, stop bubble the event to body, so will not fire the function attached to body.

Fade popup when user clicks anywhere in the document

4 Answers4