我试图修改一块jquery用于在弹出窗口中为我正在处理的食谱网站打开一个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 %} 
 {% for recipe in recipe_list %} 
  <div id="button{{ forloop.counter }}"link
 
{{ recipe.name }}
 
{{ recipe.author}}
 
Prep Time: {{ recipe.prep_time }} minutes
 
Add Recipe Remove Recipe
 
 x 
{{ recipe.name }}
 
{{ recipe.author }}
 
 Ingredients: {{ recipe.ingredients }} 

 Steps: {{ recipe.steps }} 
 
 
 
 {% endfor %}