-2

現在、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に閉じるように提案しました-魅力のように機能しました。

4

3 に答える 3

2

jQuery docs から、を使用するべきではありませんが.keyCode、.which

http://api.jquery.com/keypress/から取得しました

$(document).keypress(function(e){
  if(e.which==27){
    disablePopup($('#popupContact2'));
  }
});
于 2012-04-12T00:54:35.310 に答える
0

各IDにクラスを追加し、代わりにそれを使用して閉じました-これは魅力のように機能しました

スナックフィッシュ

于 2012-04-23T17:27:16.417 に答える
0

コードを次のように変更します。

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

締めを忘れました」 ...

編集：

別の方法で試してください：

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

次のように、期待どおりに機能するキーを取得するkeyup代わりに、イベントを使用します。keypressESC

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

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

                disablePopup6();
            }
});

function disablePopup6() {

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

        popupStatus = 0;
}
于 2012-04-12T00:47:33.320 に答える