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：我意识到只有第一个$（文档）调用正在运行

    //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添加了一个类，然后使用它来关闭 - 这就像魅力一样

snackerfish

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

3 个答案: