社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

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

Community wiki • 1 年前 • 419 次点击  

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

Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/156841
 
419 次点击  
文章 [ 3 ]  |  最新文章 1 年前