次の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ではありません。