Вопрос по jquery – Как скрыть всплывающее окно, нажав снаружи
Я пытаюсь придумать способ, чтобы при появлении сообщения # 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");
});
хммм это не работает ... спасибо, хотя
AnchovyLegend
это не работает для меня :( IDK почему .. Я просто скопировал и вставил код, похоже, он должен работать, всплывающие окна появляются, но никогда не исчезают, когда я нажимаю в другом месте ...
AnchovyLegend
#email-popup дважды в вашемclick обработчик.
всплывающее окно появляется и исчезает мгновенно.
AnchovyLegend
по которому щелкнули (не работает на дочерних элементах):
$(".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");
}
});
Вы должны изменить свой комментарий, чтобы он соответствовал вашему jquery из fiddle, ваше решение для jfiddle сработало для меня! но тот, который размещен выше, не сделал :) спасибо!
AnchovyLegend
это не работает, он работает так же, как и с кодом, размещенным выше, всплывающее окно просто появляется и исчезает мгновенно ... спасибо, хотя
AnchovyLegend