Question

我使用jQuery Tools进行叠加效果。这听起来很奇怪，但是当第一次打开叠加时，它没有按照预期居中，但是它一直位于左侧。如果我关闭链接并再次打开它，这次它的中心？不知道这里发生了什么......

$(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位置：relative并添加设置宽度：

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

宽度可以是您想要的任何宽度，但它确实需要宽度。

覆盖中心位置不起作用

1 个答案: