現在、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 キーを押すとフェードアウトが許可されますが、他のインスタンスでは許可されないことです。
何がうまくいかないのでしょうか?
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:これは解決されました-clseする必要がある各アイテムにクラスを追加し、開いているすべてのポップアップをjsに閉じるように提案しました-魅力のように機能しました。