4

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

3 に答える 3

7

あなたは近いです - ユーザーがポップアップ内をクリックしたときに伝播を停止するだけです:

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

また、ドキュメントのクリックでコードが繰り返されています。メール ポップアップを 2 回非表示にしています。

$(document).on("click", function() {
  $("#email-popup, #phone-popup").hide("fast");
});
于 2012-05-19T14:50:15.533 に答える
2

クリックされた要素のIDを確認できます（要素の子では機能しません）：

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

デモンストレーション

于 2012-05-19T14:51:24.747 に答える
1

うまくいかないってどういうこと？何が起こりますか？ところで、ハンドラー#email-popupに 2 回隠れています。click

于 2012-05-19T14:57:29.797 に答える