Как скрыть всплывающее окно, нажав снаружи

Я пытаюсь придумать способ, чтобы при появлении сообщения # email-popup или # phone-popup, если пользователь щелкает где-либо, кроме видимого всплывающего окна, оно скрывает всплывающее окно.

Мой метод скрытия всплывающих окон в приведенном ниже коде не работает хорошо ...

Мой JQuery до сих пор

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

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

Ответы на вопрос(3)

Решение Вопроса

когда пользователь нажимает во всплывающих окнах:

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

Также у вас есть несколько повторяющихся кодов в документе нажмите. Вы дважды скрываете всплывающее сообщение.

$(document).on("click", function() {
  $("#email-popup, #phone-popup").hide("fast");
});
 AnchovyLegend19 мая 2012 г., 16:53
хммм это не работает ... спасибо, хотя
 19 мая 2012 г., 16:56
@MHZ Вы должны остановить распространение на.email а также.phone также.
 19 мая 2012 г., 16:58
С каким всплывающим окном вы пытаетесь это сделать? Ваш документ только клики скрываетemail-popup.
 AnchovyLegend19 мая 2012 г., 16:57
это не работает для меня :( IDK почему .. Я просто скопировал и вставил код, похоже, он должен работать, всплывающие окна появляются, но никогда не исчезают, когда я нажимаю в другом месте ...
 19 мая 2012 г., 16:54
@ MHZ Да, это так - это базовый jQuery. Пожалуйста, покажи мне, как ты это реализовал.

#email-popup дважды в вашемclick обработчик.

 19 мая 2012 г., 17:04
@JMM Это больше комментарий, чем ответ.
 AnchovyLegend19 мая 2012 г., 17:01
всплывающее окно появляется и исчезает мгновенно.

по которому щелкнули (не работает на дочерних элементах):

$(".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

 19 мая 2012 г., 16:58
добавил скрипку, чтобы показать, что она работает.
 AnchovyLegend19 мая 2012 г., 17:08
Вы должны изменить свой комментарий, чтобы он соответствовал вашему jquery из fiddle, ваше решение для jfiddle сработало для меня! но тот, который размещен выше, не сделал :) спасибо!
 AnchovyLegend19 мая 2012 г., 16:54
это не работает, он работает так же, как и с кодом, размещенным выше, всплывающее окно просто появляется и исчезает мгновенно ... спасибо, хотя

Ваш ответ на вопрос