jquery弹出窗口不会用按键关闭，但会点击

Question

我现在在使用 jquery 时遇到了一个烦人的问题。在我解释之前，让我给你我的代码：

/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!                  
/***************************/

//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup($contact_selector){
    //loads popup only if it is disabled
    if(popupStatus==0){
        $("#backgroundPopup").css({
            "opacity": "0.7"
        }).fadeIn("slow");

        $contact_selector.fadeIn("slow");

        popupStatus = 1;
    }
}
//disabling popup with jQuery magic!
function disablePopup($contact_selector){
    //disables popup only if it is enabled
    if(popupStatus==1){
        $("#backgroundPopup").fadeOut("slow");
        $contact_selector.fadeOut("slow");
        popupStatus = 0;
    }
}

//centering popup
function centerPopup($contact_selector){
    //request data for centering
    var windowWidth = document.documentElement.clientWidth;
    var windowHeight = document.documentElement.clientHeight;
    var popupHeight = $("body").height();
    var popupWidth = $("body").width();
    //centering
    $contact_selector.css({
        "position": "absolute",
        "top": windowHeight/2-popupHeight/2,
        "left": windowWidth/2-popupWidth/2
    });
    //only need force for IE6

    $("#backgroundPopup").css({
        "height": windowHeight
    });

}

//CONTROLLING EVENTS IN jQuery
$(document).ready(function(){   
    //LOADING POPUP
    //Click the button event!
    $("#button1").click(function(){
        //centering with css
        centerPopup($('#popupContact1'));
        //load popup
        loadPopup($('#popupContact1'));
    });
    $("#button2").click(function(){
        //centering with css
        centerPopup($('#popupContact2'));
        //load popup
        loadPopup($('#popupContact2'));
    });
    $("#button3").click(function(){
        //centering with css
        centerPopup($('#popupContact3'));
        //load popup
        loadPopup($('#popupContact3'));
    });
    $("#button4").click(function(){
        //centering with css
        centerPopup($('#popupContact4'));
        //load popup
        loadPopup($('#popupContact4'));
    }); 
    $("#button5").click(function(){
        //centering with css
        centerPopup($('#popupContact5'));
        //load popup
        loadPopup($('#popupContact5'));
    });
    $("#button6").click(function(){
        //centering with css
        centerPopup($('#popupContact6'));
        //load popup
        loadPopup($('#popupContact6'));
    });                 
    //CLOSING POPUP
    //Click the x event!
    $("#popupContactClose1").click(function(){
    disablePopup($('#popupContact1'));
});
    $("#popupContactClose2").click(function(){
    disablePopup($('#popupContact2'));
});
    $("#popupContactClose3").click(function(){
    disablePopup($('#popupContact3'));
});
    $("#popupContactClose4").click(function(){
    disablePopup($('#popupContact4'));
});
    $("#popupContactClose5").click(function(){
    disablePopup($('#popupContact5'));
});
    $("#popupContactClose6").click(function(){
    disablePopup($('#popupContact6'));
});
    //Click out event!
    $("#backgroundPopup").click(function(){
        disablePopup(this);
    });
    //Press Escape event!
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact1'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact2'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact3'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact4'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact5'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact6'));
    }
});

});

所以问题是，当我尝试使用按键功能淡出 div 时，只有背景淡出，让 div 漂浮在内容窗格上。特别奇怪的是，代码的第一个实例允许在 esc 按键时淡出，但其他都不允许。

知道可能出了什么问题吗？

Edit1：我意识到只有第一个 $(document) 调用有效

    //Press Escape event!
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact1'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27){
        disablePopup($('#popupContact2'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact3'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact4'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact5'));
    }
});
    $(document).keypress(function(e){
    if(e.keyCode==27 && popupStatus==1){
        disablePopup($('#popupContact6'));
    }
});

});

第一次调用后背景 div 消失，文本框留在容器上方。如果我切换这些调用的顺序并将 disablePopup[($('#popupContact2')) 放在 disablePopup[($('#popupContact1')) 之前，那么 popupContact1 在按键时留在容器中，而不是 popupContact2

编辑：我意识到这个问题有点混乱，所以我试图在我的执行过程中更加清楚。 如果您想继续找出问题，请在以下链接中查看新问题： jquery popup window won't close on keypress

edit2：这已解决 - 尖锐的建议我为我需要关闭的每个项目添加一个类，并让 js 关闭所有打开的弹出窗口 - 工作就像一个魅力谢谢大家的帮助

Answer 1

在 jQuery 文档中，您不应该使用 .keyCode，而应该使用 .which

我是从http://api.jquery.com/keypress/那里得到的

$(document).keypress(function(e){
  if(e.which==27){
    disablePopup($('#popupContact2'));
  }
});

Answer 2

将您的代码更改为：

$("#popupContactClose6").keypress(function(e){
            if(e.keyCode==27 && popupStatus==1){
                disablePopup6();
            }
        });

您忘记了结束“...

编辑：

尝试不同的做法：

$('#backgroundPopup, #popupContact6').fadeOut("slow");

使用keyup 事件而不是keypress 使ESC 键按预期工作，如下所示：

$("#popupContactClose6").keyup(function(e) {

            if(e.keyCode==27 && popupStatus==1) {

                disablePopup6();
            }
});

function disablePopup6() {

       $('#backgroundPopup, #popupContact6').fadeOut("slow");

        popupStatus = 0;
}

Answer 3

我为每个 id 添加了一个类并用它来关闭 - 这就像一个魅力

小鱼