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的彈出窗口不會關閉按鍵時

回答

相關問題