javascript 不更新模态弹出窗口上的 css 属性

Question

我有以下 javascript 代码:

<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>

本质上，调用此函数时，它会接收网页的文件名并将内容显示在模态弹出窗口中。

当代码按原样运行时，一般预期的行为会按计划发生: mask div 占据屏幕，逐渐变暗，弹出窗口出现。

问题:我们的优惠券图像对于弹出式 div 来说太大了，所以我在其中有一个 if 语句，它会自动将弹出式窗口重新居中显示在屏幕上。然而，尽管执行了该代码，但这种重新居中永远不会发生。

有趣的部分:如果我取消对该警报的注释，图像仍然会偏离中心显示。单击“确定”关闭警报后，屏幕会重新绘制，图像现在会根据需要居中。

我已经尝试了很多东西，包括访问弹出窗口父级的不同方式，向 css() 提供参数的不同方式，将 popup.parent.css 行放在一个数字中不同的地方，对“左”值进行硬编码，仅在加载所有内容并更新 css 后才打开对话框(这个破坏了所有内容)，以及其他一些也没有用的东西。

我目前的想法:我在一篇不太相关的帖子中看到，某些 CSS 样式未更新的原因是因为“动画花费的时间太长”(或类似的原因)。我肯定会用对话框和掩码淡出重写 html，所以这是否与“左”属性没有接管有关？

我拒绝我目前的想法:我觉得情况并非如此，因为在我尝试设置“左”属性之前，我已经成功地为同一组件设置了其他属性，并且它们毫无问题地生效。如果是 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');
    });

}