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>

基本的に、この関数が呼び出されると、Web ページのファイル名を受け取り、その内容をモーダル ポップアップに表示します。

コードをそのまま実行すると、一般的に予想される動作が計画どおりに発生します。マスク div が画面を引き継ぎ、暗くなり、ポップアップが表示されます。

問題:私たちのクーポン画像はポップアップ div に対して大きすぎるため、ポップアップを画面の中央に自動的に再配置する if ステートメントがそこにあります。ただし、そのコードが実行されているにもかかわらず、この再センタリングは決して起こりません。

興味深い点:そのアラートのコメントを外しても、画像は依然として中心から外れて表示されます。[OK] をクリックしてアラートを閉じると、画面が再描画され、画像が必要に応じて中央に配置されます。

ポップアップの親にアクセスするさまざまな方法、に引数を供給するさまざまな方法、さまざまなcss()場所に popup.parent.css 行を配置する、「左」値をハードコーディングする、ダイアログは、すべてがロードされ、css が更新された後にのみ表示されます (これはすべてを壊しました)。

私の現在の考え: CSS スタイルの一部が更新されていない理由は、「アニメーションに時間がかかりすぎた」(またはそのようなもの) ためであるという、あまり関係のない投稿を見ました。私は確かに、ダイアログとマスクのフェードで html を書き直しています。

私の現在の考えに対する私の拒絶:「左」属性を設定しようとする直前に、同じコンポーネントの他の属性を正常に設定しており、問題なく有効になっているため、これは当てはまらないように感じます。それがfadeTo行だった場合は、それを一番下に移動しました. 同じことが起こりました: アラートが閉じられるまで中央に配置されませんでした。

考え?

編集:これが関連する偶然の機会に、これはASPページで実行されています。.NETではありません。

4

1 に答える 1