jQuery工具叠加ajax加载后重新定位

Question

我正在创建一个jQuery工具叠加层，并且我正在加载beforeLoad上的内容，这会改变叠加层的宽度。一旦我加载的内容，宽度扩大，但左侧的位置不会改变。我希望能够改变位置，使其现在居中，而不是更靠近屏幕的右侧。有什么想法吗？

更新：这是我的代码如下。我第一次尝试获取宽度来注册，然后我可以使用下面提供的功能来调整位置。下面的代码会返回宽度为470的宽度，这是覆盖层的初始宽度。在中，实际宽度为740后我加载内容然而该警报总是说470

<div class="simple_overlay" id="test-overlay"> 
<div class="details"> 
    <div id="overlayLoadingImg"><img id="overlayAnimatedGif" src="loading.gif" alt="Loading" /></div> 
</div> 
<a id="overlayClose" class="close">Close</a>   
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     // if the function argument is given to overlay, 
     // it is assumed to be the onBeforeLoad event listener 
     $("a.overlay").live("click", function(){ 

      $(this).overlay({ 
       mask: {color: '#000',opacity: 0.5}, 
       top: "25%", 
       effect: 'apple', 
       load: true, 
       closeOnClick: false, 
       onBeforeLoad: function() { 

        //IE7 fix for z-index. 
         this.getOverlay().insertAfter('#exposeMask'); 
        // grab wrapper element inside content 
        var wrap = this.getOverlay().find(".details"); 

        //check the datatype first. If iframe then load an iframe. If ajax then call the url via ajax call. 
        var dataurl = "http://someurl.com/path"; 


        // load the page specified in the trigger 
        $.ajax({ 
          url: dataurl, 
          success: function(data){ 
          $(wrap).html(""); 
          $(wrap).append(data); 

          $(".closeOverlay").click(function(){ 
           $("#overlayClose").click(); 
          }); 

          alert($("#test-overlay").width()); 

          }, 
          error: function (jqXHR, textStatus, errorThrown) { 

          }, 
          complete: function(data){ 

          } 
         }); 



       } 

      }); 



    }); 
}); 

感谢

Answer 1

编写设置您的覆盖元素的left CSS属性取决于功能屏幕宽度和元素的宽度，然后在设置AJAX回调中的内容后调用它。

可能是这样的：

function setLeft(id) { 
    var overlay = $('#' + id); 
    var screenWidth = screen.width; 
    var overlayWidth = overlay.width(); 
    var left = (screenWidth/2 - overlayWidth/2); 
    overlay.css({left : left}); 
} 

jsFiddle example