オーバーレイ効果には jQuery ツールを使用します。これは非常に奇妙に聞こえるかもしれませんが、オーバーレイを初めて開いたとき、期待どおりに中央に配置されず、ずっと左側に配置されます。リンクを閉じて再度開くと、今度は中央に配置されますか?? ここで何が起こっているのかわかりません...
$(function() {
$("a[rel]").overlay({
mask: '#000',
top: 'center',
left: 'center',
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"), function(){initialize();});
}
});
});
<a href="default.cs.asp?Process=ViewCheckinMap" rel="#overlay">clik to map</a>
<!-- overlayed element -->
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap"></div>
</div>
<style>
/* use a semi-transparent image for the overlay */
#overlay {
background-image:url(/media/img/overlay/transparent.png);
color:#efefef;
height:450px;
}
/* container for external content. uses vertical scrollbar, if needed */
div.contentWrap {
height:400px;
width:960px;
background: #FFF;
}
</style>