我的 html 页面中有多个指向同一个 jquery 弹出窗口的链接。弹出窗口内的实际表单将根据弹出该弹出窗口的链接而有所不同。但实际的弹出窗口本身是一样的。页面内容是动态的，我永远不知道弹出窗口的链接会出现在哪里以及它将包含哪种形式。
我在实施方面遇到了 3 个问题：
我用作链接的按钮（图像）通过弹出窗口及其包含的文本来单击并显示弹出窗口。我试过在css中的不同地方设置z属性并设置不同的值，但没有任何效果。
按钮链接停留在前台并且是可点击的，而弹出窗口内的表单被禁用。
如果我点击另一个按钮链接，我会得到第二个弹出窗口。我希望在第二个弹出窗口出现之前关闭第一个弹出窗口。
您可以在 jsFiddle 的示例中看到问题：http: //jsfiddle.net/azxf4/2/
弹出窗口.css
.popbox {
margin:0px auto;
text-align:center;
position:relative;
}
.collapse { position:relative; }
.box {
display:block;
display:none;
background:#FFF;
border:solid 1px #BBBBBB;
border-radius:5px;
box-shadow:0px 0px 15px #999;
position:absolute;
}
.open {}
.box a.close {
color:red;
font-size:12px;
font-family:arial;
text-decoration:underline;
}
.arrow {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #FFF;
position:absolute;
left:1px;
top:-10px;
z-index:1001;
}
.arrow-border {
width: 0;
height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 11px solid #BBBBBB;
position:absolute;
top:-12px;
z-index:1000;
}
popup.js
(function(){
$.fn.popbox = function(options){
var settings = $.extend({
selector : this.selector,
open : '.open',
box : '.box',
arrow : '.arrow',
arrow_border : '.arrow-border',
close : '.close'
}, options);
var methods = {
open: function(event){
event.preventDefault();
var pop = $(this);
var box = $(this).parent().find(settings['box']);
box.find(settings['arrow']).css({'left': box.width()/2 - 10});
box.find(settings['arrow_border']).css({'left': box.width()/2 - 10});
if(box.css('display') == 'block'){
methods.close();
} else {
box.css({'display': 'block', 'top': 10, 'left': ((pop.parent().width()/2) -box.width()/2 )});
}
},
close: function(){
$(settings['box']).fadeOut("fast");
}
};
$(document).bind('keyup', function(event){
if(event.keyCode == 27){
methods.close();
}
});
$(document).bind('click', function(event){
if(!$(event.target).closest(settings['selector']).length){
methods.close();
}
});
return this.each(function(){
$(this).css({'width': $(settings['box']).width()}); // Width needs to be set otherwise popbox will not move when window resized.
$(settings['open'], this).bind('click', methods.open);
$(settings['open'], this).parent().find(settings['close']).bind('click', methods.close);
});
}
}).call(this);
html
<html>
<head></head>
<body>
<div class='popbox'><a class='open' href='#'><img src='http://thezoovninc.com/images/Web/New%20folder/plusButton.png' width='30' height='30'></a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form action='someActionPage.jsp' id='actionId'>
<p>test</p>
<div class='input'>Last Name:<input type='text' name='lastname' id='lastname' /> </div>
<div class='input'>First Name:<input type='text' name='firstname' id='firstname' /> </div>
<div class='close'>
<input type='submit' value='Add' /> <a href='#'>Cancel</a>
</div>
</form>
</div>
</div>
</div>
<div class='popbox'><a class='open' href='#'><img src='http://thezoovninc.com/images/Web/New%20folder/plusButton.png' width='30' height='30'></a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form action='someActionPage.jsp' id='actionId'>
<p>test</p>
<div class='input'>Last Name:<input type='text' name='lastname' id='lastname' /> </div>
<div class='input'>First Name:<input type='text' name='firstname' id='firstname' /> </div>
<div class='close'>
<input type='submit' value='Add' /> <a href='#'>Cancel</a>
</div>
</form>
</div>
</div>
</div>
<div class='popbox'><a class='open' href='#'><img src='http://thezoovninc.com/images/Web/New%20folder/plusButton.png' width='30' height='30'></a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form action='someActionPage.jsp' id='actionId'>
<p>test</p>
<div class='input'>Last Name:<input type='text' name='lastname' id='lastname' /> </div>
<div class='input'>First Name:<input type='text' name='firstname' id='firstname' /> </div>
<div class='close'>
<input type='submit' value='Add' /> <a href='#'>Cancel</a>
</div>
</form>
</div>
</div>
</div>
<div class='popbox'><a class='open' href='#'><img src='http://thezoovninc.com/images/Web/New%20folder/plusButton.png' width='30' height='30'></a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form action='someActionPage.jsp' id='actionId'>
<p>test</p>
<div class='input'>Last Name:<input type='text' name='lastname' id='lastname' /> </div>
<div class='input'>First Name:<input type='text' name='firstname' id='firstname' /> </div>
<div class='close'>
<input type='submit' value='Add' /> <a href='#'>Cancel</a>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript" >
$(document).ready(function () {
$(".popbox").popbox();
});
</script>
</body>
我确定这很简单，但我无法弄清楚。任何建议将不胜感激！
谢谢