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

3

Я пытаюсь придумать способ, чтобы при появлении сообщения # 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   ответа
5

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

$("#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");
});
хммм это не работает ... спасибо, хотя AnchovyLegend
@MHZ Вы должны остановить распространение на.email а также.phone также.
С каким всплывающим окном вы пытаетесь это сделать? Ваш документ только клики скрываетemail-popup.
это не работает для меня :( IDK почему .. Я просто скопировал и вставил код, похоже, он должен работать, всплывающие окна появляются, но никогда не исчезают, когда я нажимаю в другом месте ... AnchovyLegend
@ MHZ Да, это так - это базовый jQuery. Пожалуйста, покажи мне, как ты это реализовал.
1

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

@JMM Это больше комментарий, чем ответ.
всплывающее окно появляется и исчезает мгновенно. AnchovyLegend
2

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

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

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

Похожие вопросы