jQuery弹出窗口将不会在按键上关闭 [英] jquery popup window won't close on keypress

问题描述

我试图修改用于在我正在开发的食谱网站的弹出窗口中打开div的一段jQuery

I tried to modify a piece of jquery used to open a div in a popup window for a recipe website i am working on

我能够对其进行修改以适合我的需要，但是在尝试允许按键关闭时遇到了障碍

I was able to modify it to suit my needs but ran into a snag when trying to allow close on keypress

到目前为止，我拥有的代码仅允许我在按键时关闭第一个弹出窗口，而当我尝试在其他弹出窗口上执行相同操作时，它只会淡出背景，并使弹出窗口漂浮在内容容器上.这是代码:

the code i have as of now allows me to close only the first popup window on keypress and when I try to do the same on the other popups it only fades the background out and leaves the popup window floating over the content container. here is the code:

jQuery:

//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'));
});

    //Press Escape event!
    $(document).keyup(function(e) {
    if( e.which == 27 ){
    disablePopup($('#popupContact1'));

    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact2'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact3'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact4'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact5'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact6'));
    }
});

});

css:

table {  
border-collapse:separate;  
border-spacing:0pt;  
}  
caption, th, td {  
font-weight:normal;  
text-align:left;  
}  
blockquote:before, blockquote:after, q:before, q:after {  
content:"";  
}  
blockquote, q {  
quotes:"" "";  
}  

br.both{  
clear:both;  
}  
#backgroundPopup{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:100%;  
width:100%;  
top:0;  
left:0;  
background:#000000;  
border:1px solid #cecece;  
z-index:1;  
}  
#popupContact1, #popupContact2, #popupContact3, #popupContact4, #popupContact5, #popupContact6{  
display:none;  
position:fixed;  
_position:absolute; /* hack for internet explorer 6*/  
height:384px;  
width:408px;  
background:#FFFFFF;  
border:2px solid #cecece;  
z-index:2;  
padding:12px;  
font-size:13px;  
}  
#popupContact1 h1, #popupContact2 h1, #popupContact3 h1, #popupContact4 h1, #popupContact5 h1, #popupContact6 h1{  
text-align:left;  
color:#6FA5FD;  
font-size:22px;  
font-weight:700;  
border-bottom:1px dotted #D3D3D3;  
padding-bottom:2px;  
margin-bottom:20px;  
}  
#popupContactClose1, #popupContactClose2, #popupContactClose3,#popupContactClose4,#popupContactClose5,#popupContactClose6,{  
font-size:14px;  
line-height:14px;  
right:6px;  
top:4px;  
position:absolute;  
color:#6fa5fd;  
font-weight:700;  
display:block;  
cursor:pointer;
}  
#button6,#button5,#button4,#button3,#button2,#button1, {  
text-align:left;  
cursor:pointer;
}

django的html模板:

html template for django:

{% block content %}
{% autopaginate recipe_list 6 %}
    <div id="recipe_cont">
    {% for recipe in recipe_list %}
    <div id="recipe">
        <img src="{{ STATIC_URL }}chicknbraw.jpg" alt="" height="30" width="30" style=display:"inline"; />
        <div id="button{{ forloop.counter }}"<a type="submit" value="View" >link</a></div>          
        <h4>{{ recipe.name }}</h4></a>
        <h5>{{ recipe.author}}</h5>
        <h5>Prep Time: {{ recipe.prep_time }} minutes</h5>
        <h6><a href="/addrecipe/{{ recipe.id }}">Add Recipe</a>
        <a href="/removerecipe/{{ recipe.id }}">Remove Recipe</a></h6>
        <div id="popupContact{{ forloop.counter }}">
            <a id="popupContactClose{{ forloop.counter }}" style="cursor:pointer;float:right;">x</a>
            <h1>{{ recipe.name }}</h1>
            <h3>{{ recipe.author }}</h3>
            <p id="contactArea">
                Ingredients: {{ recipe.ingredients }}
                <br/><br/>
                Steps: {{ recipe.steps }}
            </p>
        </div>
        <div id="backgroundPopup"></div>        
    </div>
    {% endfor %}
    </div>
    <div id="col2-footer">
    {% paginate %}
    <p id="recipe_order_text"> order by: <a href="/account/ordered/name">abc</a>|<a href="/account/ordered/date">date</a> 
    </div>

{% endblock %}

我认为给我错误的代码如下:

the code that i believe is giving me the error is the following:

//Press Escape event!
    $(document).keyup(function(e) {
    if( e.which == 27 ){
    disablePopup($('#popupContact1'));

    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact2'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact3'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact4'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact5'));
    }
});
    $(document).keyup(function(e){
    if(e.which==27){
        disablePopup($('#popupContact6'));
    }
});

});

我注意到这最后一部分代码取决于顺序，第一个$(document)调用是唯一可以正常运行的调用.因此，按当前顺序

something i noticed about this last bit of code is depending on the order, the first $(document) call is the only one that functions correctly. So in the current order

//Press Escape event!
    $(document).keyup(function(e) {
    if( e.which == 27 ){
    disablePopup($('#popupContact1'));

    }
});

可以正确激活，但如果是#popupContact2，则#popupContact2 div可以正常工作.

activates correctly but if that was for #popupContact2 then the #popupContact2 div would work correctly.

谢谢大家，如果这是代码重载，我很抱歉-我只是想确保自己很周到，没有遗漏任何细节.

Thank you everyone and sorry if this is code overload - i just wanted to make sure I was thorough and didn't leave any details out.

最好

鲷鱼

推荐答案

由于键"并不是固有地特定于打开哪个对话框，因此您可以为每个对话框元素都指定一个类(例如弹出")，然后:

Since a "keyup" isn't inherently specific to which dialog is open, you could just give every dialog element a class (like "popup") and then:

disablePopup($('.popup'));

(单个)"keyup"处理程序中的

from inside the (single) "keyup" handler.

这篇关于jQuery弹出窗口将不会在按键上关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！