How to hide a popup by clicking outside

Question

I am trying to come up with a way so that once #email-popup or #phone-popup is visible, if the user clicks anywhere EXCEPT the visible popup, then it is going to hide the popup.

My method for hiding the popups in the code below does not work well...

My JQuery so far

$(".email").click(function(){
    $("#email-popup").show("fast");
});
$(".phone").click(function(){
   $("#phone-popup").show();
});

$(document).click(function() {
     $("#email-popup").hide("fast");                        
     $("#phone-popup").hide("fast");
});

Sampson · Accepted Answer · 2012-05-19T15:03:17.277

7

You're close - just stop the propagation when the user clicks within the popups:

$("#email-popup, #phone-popup").on("click", function(e){
  e.stopPropagation();
});

$(".email").on("click", function(e){
  e.stopPropagation();
  $("#email-popup").show("fast");
});

$(".phone").on("click", function(e){
  e.stopPropagation();
  $("#phone-popup").show();
});

Also you have some repeated code in the document click. You're hiding the email popup twice.

$(document).on("click", function() {
  $("#email-popup, #phone-popup").hide("fast");
});

edited May 19 '12 at 15:03

answered May 19 '12 at 14:50

Sampson

265,109
74
539
565

@MHZ Yes it does - this is basic jQuery. Please show me how you've implemented it. – Sampson May 19 '12 at 14:54
@MHZ You need to stop propagation on the `.email` and `.phone` as well. – Sampson May 19 '12 at 14:56
its not working for me:( idk why.. I just copied and pasted the code, it looks like it should work, the popups appear but never disappear when I click elsewhere... – AnchovyLegend May 19 '12 at 14:57
Which popup are you trying it with? Your document click only hides `email-popup`. – Sampson May 19 '12 at 14:58

adeneo · Answer 2 · 2014-01-17T16:19:30.130

2

You could check the ID of the element clicked (won't work on children of the elements) :

$(".email").click(function(e){
    e.stopPropagation();
    $("#email-popup").show("fast");
});
$(".phone").click(function(e){
    e.stopPropagation();
    $("#phone-popup").show("fast");
});

$(document).click(function(e) {
     if (!(e.target.id === 'email-popup' || e.target.id === 'phone-popup')) {
         $("#email-popup, #phone-popup").hide("fast");                        
     }
});

DEMONSTRATION

edited Jan 17 '14 at 16:19

answered May 19 '12 at 14:51

adeneo

312,895
29
395
388

this does not work, it acts the same way as it did with the code posted above, popup just appears and disappears instantly... thanks though – AnchovyLegend May 19 '12 at 14:54
you should modify your comment to match your jquery from fiddle, your solution on jfiddle worked for me! but the one posted above did not :) thank you! – AnchovyLegend May 19 '12 at 15:08

score 1 · Answer 3 · answered May 19 '12 at 14:57

1

What about it doesn't work well? What does happen? By the way, you're hiding #email-popup twice in your click handler.

answered May 19 '12 at 14:57

JMM

26,019
3
50
55

the popup appears and disappears instantly. – AnchovyLegend May 19 '12 at 15:01
1

@JMM This is more of a comment than an answer. – Sampson May 19 '12 at 15:04

How to hide a popup by clicking outside

3 Answers3

Linked