我现在在使用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'));
}
});
});
所以问题是,当我尝试使用keypress函数来淡出div时,只有背景会淡出,使div漂浮在内容窗格上。特别奇怪的是,代码的第一个实例允许esc键上的淡出,但其他实例都不允许。
知道可能出了什么问题吗?
第1版:我意识到只有第一个$(文档)调用有效
//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]($('#popupContact 1'))之前,则popupContact1留在容器中,而不是popupContact2
编辑:我意识到这个问题有点乱,所以我在执行时尽量说得更清楚。
如果您想继续解决问题,请查看以下链接中的新问题:
jquery popup window won't close on keypress
编辑2:这个问题已经解决了-pointy建议我为我需要clse的每个项目添加一个类,然后让js关闭所有打开的弹出窗口-效果很好,谢谢大家的帮助