Перекрытие инструментов jQuery Tools Перепозиционирование после загрузки ajax - PullRequest
Новая
       6

Перекрытие инструментов jQuery Tools Перепозиционирование после загрузки ajax

0 голосов
/ 10 января 2012

Я создаю наложение инструментов 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){

                          }
                        });



                }

            });



     });
});

Спасибо

1 Ответ

0 голосов
/ 10 января 2012

Напишите функцию, которая устанавливает свойство 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 пример

...