0
最初のオーバーレイでボタンをクリックしたときに2番目のオーバーレイがjQuery経由で呼び出されるように2つのオーバーレイを連結しようとしています。jQueryでトリガされたときにjQuery UIオーバーレイがマスクを表示しない
問題は、2番目のオーバーレイがマスクなしで表示されることです。 2番目のオーバーレイを直接呼び出すための代替リンクを追加しましたが、うまくいきます。 はと表示され、jQueryから呼び出されたときのトリガークリックイベントの動作は実際にリンクをクリックしたときとは異なります。ここで
が単純化されたテストケースである：
<!DOCTYPE html>
<html>
<head>
<!-- include the Tools -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
/* the overlayed element */
.simple_overlay {
display:none;
z-index:10000;
width:200px;
min-height:200px;
border:1px solid #666;
background-color:#FFFFFF;
}
/* close button positioned on upper right corner */
.simple_overlay .close {
background-image:url(/images/close.png);
position:absolute;
right:-15px;
top:-15px;
cursor:pointer;
height:35px;
width:35px;
}
</style>
</head>
<body>
<div id="triggers">
<div id="Overlay1Trigger" class="OverlayClass" style="cursor:pointer" rel="#mies1">Click me to start</div>
<br/><br/><br/><br/><br/><br/>
<div id="Overlay2Trigger" class="OverlayClass" style="cursor:pointer;visibility:true" rel="#mies2">Alternative option</div>
</div>
<div class="simple_overlay" id="mies1">
<div class="details">
<form name="popup" method="post" action="/">
Click the button to get confirmation dialog
<br/><br/><input type="submit" id="SubmitButton" onclick="$('.close').click();javascript:Confirm();return false;" value="Confirm" title="Confirm"/>
</form>
</div>
</div>
<div class="simple_overlay" id="mies2">
<div class="details">
Confirmed!
<form name="popup" method="post" action="/">
<br/><br/><input type="submit" id="CloseButton" onclick="$('.close').click();return false;" value="cancel" title="cancel"/>
</form>
</div>
</div>
<script>
function Confirm() {
// $('#Overlay2Trigger').data("overlay").load(); // This doesn't work either!
$('#Overlay2Trigger').click();
return false;
}
</script>
<script>
$(document).ready(function() {
$(".OverlayClass").overlay();
});
</script>
<script>
$(".OverlayClass").overlay({
mask: '#789'
});
</script>
</body>
</html>