Javascript не обновляет атрибут CSS на модального всплывающего окна

Question

У меня есть следующий яваскрипта код:

<script type="text/javascript"> 
    function doPopup(file){ 
    var dlg=$('#popup').dialog({ 
     resizable: false, 
     autoOpen: false, 
     modal: true, 
     hide: 'fade', 
     position: ['center', 'center'] 
    }); 

    dlg.load(file, function(){ 
     dlg.dialog('open'); 
    }); 

    var maskHeight = $(document).height(); 
    var maskWidth = $(window).width(); 
    $('#mask').css({'width':maskWidth, 'height':maskHeight}); 
    $('#mask').fadeTo("slow", 0.85); 

    dlg.parent().css('z-index', 9001); 
    dlg.parent().css('position', 'absolute'); 
    //alert('I'm an alert'); 

    if(file.indexOf("CustomerCouponDisplay.asp" !== -1)) { 
     var imgWidth = $('#couponImg').width(); 
     var winW = $(window).width(); 
     dlg.parent().css('left', (winW - imgWidth)/2); 
    } 
    } 
</script> 

По существу, когда эта функция вызывается, она принимает имя файла веб-страницы и отображает содержимое в модальном выскакивать.

Когда код запускается как есть, общее ожидаемое поведение происходит в соответствии с планом: маска div захватывает экран, исчезает до темноты, и появляется всплывающее окно.

Проблема: Наше изображение купона слишком велико для всплывающего div, поэтому у меня есть оператор if, который автоматически перекроет всплывающее окно на экране. Однако это повторное центрирование никогда не происходит, несмотря на то, что этот код выполняется.

Веселая часть: Если я раскомментирую это предупреждение, изображение все еще отображается вне центра. После нажатия кнопки «ОК», чтобы закрыть оповещение, экран перерисовывается, и изображение теперь центрируется по желанию.

Я пробовал несколько вещей, включая различные способы доступа к родительскому элементу всплывающего окна, различные способы предоставления аргументов css(), поместив строку popup.parent.css в несколько разных мест, hardcoding «left» ', открывая диалог только после того, как все будет загружено и обновлено css (этот сломал все) и несколько других вещей, которые также не работали.

Моя текущая мысль: я видел в одном не очень-то, что связано с тем, что некоторые из стилей CSS не обновлялись, потому что «анимация слишком длилась» (или что-то в этом роде). Я, конечно, делаю html rewrite с диалогом и затуханием маски, так что это может быть связано с атрибутом «left», который не захватывает?

Отказ от моей нынешней мысли: я чувствую, что это не так, потому что ПРАВИЛЬНО ПЕРЕД Я пытаюсь установить атрибут «left», я успешно устанавливаю другие атрибуты для одного и того же компонента, и они вступают в силу без проблем , В случае, если это была линия fadeTo, я даже переместил ее внизу. То же самое произошло: не было сосредоточено до тех пор, пока предупреждение не было закрыто.

Мысли?

Редактировать: как раз это важно, это выполняется на странице ASP. Это не. NET.

Answer 1

Подсказка - это предупреждение. Он показывает, что код, который пытается изменить размер, происходит до того, как диалог загрузится и откроется.

Попробуйте ввести код для управления диалоговым окном в обработчик событий для открытия диалога.

См here

function doPopup(file){ 
    var dlg=$('#popup').dialog({ 
     resizable: false, 
     autoOpen: false, 
     modal: true, 
     hide: 'fade', 
     position: ['center', 'center'], 
     open: function() { 
     var dialogParent = $(this).parent(); 
     var maskHeight = $(document).height(); 
     var maskWidth = $(window).width(); 
     $('#mask').css({'width':maskWidth, 'height':maskHeight}); 
     $('#mask').fadeTo("slow", 0.85); 

     dialogParent.css('z-index', 9001); 
     dialogParent.css('position', 'absolute'); 

     if(file.indexOf("CustomerCouponDisplay.asp" !== -1)) { 
      var imgWidth = $('#couponImg').width(); 
      var winW = $(window).width(); 
      dialogParent.css('left', (winW - imgWidth)/2); 
     } 
     } 
    }); 

    dlg.load(file, function(){ 
     dlg.dialog('open'); 
    }); 

}