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

jQuery Tools Overlay在ajax加载后重新定位

1 个答案: