jQuery的弹出窗口不会关闭按键时

我试图修改用于打开弹出式窗口中的div的食谱网站我就jQuery的弹出窗口不会关闭按键时

工作，我能修改，以适应一块的jQuery的我需要，但遇到了一个障碍，当试图允许按键关闭

我现在的代码允许我只关闭按键上的第一个弹出窗口，当我尝试在其他弹出窗口上做同样的事情时，它只会消失背景出来并将弹出窗口留在内容容器上。这里是代码：

的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：Django的

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; 
}

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会正常工作。

谢谢大家，对不起，如果这是代码超载 - 我只是想确保我是彻底的，没有留下任何细节。

最佳，

snackerfish

来源

2012-04-12 snackerfish

为什么不只有一个“密码”处理程序关闭**所有**打开弹出窗口？ – Pointy 2012-04-12 14:45:54

这是一个好主意，因为一次只能打开一个，但我不知道如何去做 – snackerfish 2012-04-12 14:48:21

为HTML元素提供一个类（例如“popup”），然后调用'disablePopup（$（' .popup'））;'。 – Pointy 2012-04-12 14:49:18

由于“KEYUP”并非天生具体到对话框打开时，你可以给每个对话框元素的类（如“弹出”），然后输入：

disablePopup($('.popup'));

从（单个）“键控”处理程序中。

来源

2012-04-12 15:12:20 Pointy

谢谢尖尖 – snackerfish 2012-04-13 02:59:22

jQuery的弹出窗口不会关闭按键时

回答

相关问题