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>

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

当代码按原样运行时，一般预期的行为按计划发生：掩码div占用屏幕，淡入淡出，弹出窗口显示。

问题：我们的优惠券图片对于popup div来说太大了，所以我在那里有一个if语句会自动重新设置屏幕上的弹出窗口。然而，尽管代码正在执行，但这种重新定心从未发生过。

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

我尝试了很多方法，包括访问弹出窗口父级的不同方式，向css()提供参数的不同方法，将popup.parent.css行放在多个不同的位置，硬编码'left'值，仅在加载所有内容并更新css后打开对话框（这个会破坏所有内容），以及其他一些也无效的内容。

我当前的想法：我在一篇并不真实相关的帖子中看到，某些CSS样式没有被更新的原因是因为“动画花了太长时间”（或类似的东西）。我当然正在使用对话框和屏蔽渐变来重写html，那么这可能与“左”属性无关并没有接管吗？

我拒绝了我当前的想法：我觉得情况并非如此，因为在我尝试设置'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');
    });

}

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

1 个答案: