我现在在使用 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
编辑2：这已解决 - 尖锐的建议我为我需要关闭的每个项目添加一个类，然后让 js 关闭所有打开的弹出窗口 - 就像一个魅力一样谢谢大家的帮助