2

アプリ用に素敵な小さなモーダル メッセージ ウィンドウを作成しましたが、オーバーレイに挿入されているコンテナーの高さを見つけることができないようです。

function load_shipping_message (title, message) {
   var left = (($(window).width() / 2) - 300) + 'px';
   var height = $(document).height();
   var overlay = $('<div id="overlay" style="display:none;height:'+height+'px;"></div>').appendTo($('body'));
   var atc = $('<div class="atc-container" style="width:600px;"></div>').appendTo($('#overlay'));
   var mess = $('<div class="atc-msg"><div class="success">'+title+'</div><p>'+message+'</p><p class="clearfix"><a class="button" style="float:right;"><span>Close</span></p></div>');
   atc.html(mess);
   var top = (($(window).height() / 2) - (atc.height() / 2)) + 'px';
   atc.css ({
      'top': top,
      'left': left  
   });
   overlay.fadeIn('slow', function () {
      overlay.click (function() {
         overlay.fadeOut ('slow', function () {
            overlay.remove();   
         });    
      });
   });
}

上記の atc.height() の値は、コンテンツが含まれていても常に 0 を返します。

atc.height() は常にゼロであるため、メッセージ ボックスの上部をビューポートの中間点に設定するだけです。きちんと中央揃えにしたいだけで、中身の長さによって箱の高さが明らかに違います。

おそらくオーバーレイが非表示になっているためでしょうか？

ありがとう。

-ヴィンス

4

2 に答える 2

1

はい、親が非表示の場合は 0 と表示されます。オーバーレイをユーザー ビューの外に移動してみてください。margin-top: -10000px など、display none の代わりに同様のものを使用して、DOM が引き続きレンダリングできるようにします。見えない。

于 2012-04-19T19:50:44.703 に答える
1

要素に がある場合、その要素display:noneとそのすべての子孫の高さ (および幅) はゼロになります。

これを修正するには、次のようにします。

set display to block
get height
set display back to none

JS はページの再描画をブロックするため、ユーザーは高さの測定中に表示されている要素を見ることができません。

于 2012-04-19T19:54:32.640 に答える