覆盖中心位置不起作用

Question

我使用 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>

Answer 1

您只需将#overlay 设为相对位置并添加设置宽度：

#overlay {
    position:relative;
    width:480px;
}

宽度可以随心所欲，但确实需要宽度。