Javascript jquery弹出窗口不会在按键时关闭
我试图修改一段jquery,该jquery用于在一个弹出窗口中为我正在处理的菜谱网站打开一个div 我可以修改它以满足我的需要,但在尝试允许关闭按键时遇到了障碍 我现在拥有的代码只允许我关闭按键上的第一个弹出窗口,当我尝试在其他弹出窗口上执行相同操作时,它只会淡出背景,使弹出窗口漂浮在内容容器上。代码如下: Jquery:Javascript jquery弹出窗口不会在按键时关闭,javascript,jquery,keypress,popupwindow,Javascript,Jquery,Keypress,Popupwindow,我试图修改一段jquery,该jquery用于在一个弹出窗口中为我正在处理的菜谱网站打开一个div 我可以修改它以满足我的需要,但在尝试允许关闭按键时遇到了障碍 我现在拥有的代码只允许我关闭按键上的第一个弹出窗口,当我尝试在其他弹出窗口上执行相同操作时,它只会淡出背景,使弹出窗口漂浮在内容容器上。代码如下: Jquery: //SETTING UP OUR POPUP //0 means disabled; 1 means enabled; var popupStatus = 0; //loa
//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的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 %}
我注意到这最后一段代码取决于顺序,第一个$document调用是唯一正确运行的调用。那么按照目前的顺序,
//Press Escape event!
$(document).keyup(function(e) {
if( e.which == 27 ){
disablePopup($('#popupContact1'));
}
});
正确激活,但如果是针对popupContact2,则popupContact2 div将正常工作
谢谢大家,如果这是代码过载,我很抱歉-我只是想确保我是彻底的,没有遗漏任何细节
最好的
snackerfish由于键控本身并不特定于打开的对话框,因此您可以给每个对话框元素一个类,如popup,然后:
disablePopup($('.popup'));
从单个键控处理程序内部。为什么不让单个键控处理程序关闭所有打开的弹出窗口?这是一个好主意,因为一次打开的弹出窗口不会超过一个,但我不确定如何做到这一点,给HTML元素一个类,比如maybe popup,然后调用disablePopup$'。popup';。哦,是的,这是一个好主意,我要去试试它,效果很好,你我的先生是一个很好的程序员,非常有帮助
//Press Escape event!
$(document).keyup(function(e) {
if( e.which == 27 ){
disablePopup($('#popupContact1'));
}
});
disablePopup($('.popup'));