jQuery工具疊加ajax加載後重新定位

我正在創建一個jQuery工具疊加層，並且我正在加載beforeLoad上的內容，這會改變疊加層的寬度。一旦我加載的內容，寬度擴大，但左側的位置不會改變。我希望能夠改變位置，使其現在居中，而不是更靠近屏幕的右側。有什麼想法嗎？jQuery工具疊加ajax加載後重新定位

更新：這是我的代碼如下。我第一次嘗試獲取寬度來註冊，然後我可以使用下面提供的功能來調整位置。下面的代碼會返回寬度爲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){ 

          } 
         }); 



       } 

      }); 



    }); 
});

感謝

來源

2012-01-10 Scoota P

編寫設置您的覆蓋元素的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

來源

2012-01-10 16:36:13

其加載內容之前檢測的覆蓋物的大小。即使我把這個代碼放在ajax調用的成功函數中。任何想法？ – 2012-01-10 19:02:48

@ScootaP您可以編輯問題以包含您現在擁有的代碼嗎？ – 2012-01-10 19:04:33

我剛加入它 – 2012-01-10 19:16:00

jQuery工具疊加ajax加載後重新定位

回答

相關問題