HTMLページに同じjqueryポップアップへの複数のリンクがあります。ポップアップ内の実際のフォームは、どのリンクがそのポップアップを表示したかによって異なります。ただし、実際のポップアップ自体は同じになります。ページのコンテンツは動的であり、ポップアップへのリンクがどこに表示され、どのフォームが含まれるかはわかりません。
実装に関して3つの問題があります。
クリックしてポップアップを表示するためのリンクとして使用するボタン（画像）は、ポップアップとそれに含まれるテキストを介して表示されます。さまざまな場所でさまざまな値にcssのz属性を設定しようとしましたが、効果はありませんでした。
ポップアップ内のフォームが無効になっている間、ボタンリンクはフォアグラウンドにとどまり、クリック可能です。
別のボタンのリンクをクリックすると、2番目のポップアップが表示されます。2番目のポップアップが表示される前に、最初のポップアップを閉じてください。
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>
簡単なことだと思いますが、わかりません。どんなアドバイスも大歓迎です！
ありがとう