代码之家  ›  专栏  ›  技术社区  ›  Community wiki

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

  •  -2
  • Community wiki  · 技术社区  · 1 年前

    我现在在使用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关闭所有打开的弹出窗口-效果很好,谢谢大家的帮助

    3 回复  |  直到 1 年前
        1
  •  2
  •   Alex Siri    12 年前

    在jQuery文档中,您不应该使用 .keyCode 但是 .which

    我是从 http://api.jquery.com/keypress/

    $(document).keypress(function(e){
      if(e.which==27){
        disablePopup($('#popupContact2'));
      }
    });
    
        2
  •  0
  •   Leniel Maccaferri    12 年前

    将代码更改为:

    $("#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;
    }
    
        3
  •  0
  •   snackerfish    12 年前

    我给每个id添加了一个类,并用它来关闭——这就像一个符咒

    偷吃鱼