1

我有以下 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 占据屏幕，淡入暗淡，然后出现弹出窗口。

问题：我们的优惠券图像对于弹出 div 来说太大了，所以我在那里有一个 if 语句，它会自动将弹出窗口重新定位在屏幕上。但是，尽管执行了该代码，但这种重新居中从未发生过。

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

我尝试了很多方法，包括访问弹出窗口父级的不同方式、向 提供参数的不同方式css()、将 popup.parent.css 行放在多个不同的位置、硬编码“左”值、打开只有在加载完所有内容并更新 css（这个破坏了所有内容）以及其他一些也不起作用的事情之后，才出现对话框。

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

我拒绝我目前的想法：我觉得情况并非如此，因为在我尝试设置“左”属性之前，我成功地为同一组件设置了其他属性，并且它们毫无问题地生效。如果它是 fadeTo 线，我什至将它移到了底部。同样的事情发生了：直到警报关闭后才居中。

想法？

编辑：只是碰巧这是相关的，这是在 ASP 页面上运行的。它不是.NET。

4

1 回答 1

0

线索就是警报。它表明尝试调整大小的代码在对话框加载和打开之前发生。

尝试将用于操作对话框的代码放入用于打开对话框的事件处理程序中。

看这里

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');
    });

}
于 2013-06-14T14:04:26.913 回答