0

我试图修改用于在我正在开发的食谱网站的弹出窗口中打开 div 的一段 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模板：

{% 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 %}

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

//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) 调用是唯一正常运行的调用。所以按照目前的顺序

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

    }
});

正确激活，但如果这是针对 #popupContact2 那么 #popupContact2 div 将正常工作。

谢谢大家，如果这是代码过载，我很抱歉——我只是想确保我是彻底的，没有遗漏任何细节。

最好的，

零食鱼

4

1 回答 1

0

由于“keyup”本身并不特定于打开哪个对话框，因此您可以给每个对话框元素一个类（如“popup”），然后：

disablePopup($('.popup'));

从（单个）“keyup”处理程序内部。

于 2012-04-12T15:12:20.867 回答