2

モーダルウィンドウを画面の中央に配置しようとしています（これは完全に正常に機能します）。jQueryを介してコンテンツを追加し、中央に幅と高さを取得する場合を除いて、常に高さを出力します0。意図した高さ。これが私のコードです：

        // Now to use the Data and add it to the Modal Window...
        $('#portfolioModal .inner .data').html('<h1>' + parsedData['name'] + '</h1>\n' + parsedData['desc'] + '');

        var modalWidth = $('#portfolioModal').width(); // Get the Modal Window's Width
        var modalHeight = $('#portfolioModal').height(); // Get the Modal Window's Height

        alert(modalHeight);

        var left = (windowWidth / 2) - (modalWidth / 2); // Calculate the left margin for center alignment
        var top = (windowHeight / 2) - (modalHeight / 2); // And calculate the top margin for center alignment

        $('#portfolioModal').css({ // Append the Left and Top margin to the Modal Window
            'left': left,
            'top': top
        });

モーダルHTML：

        <div id="portfolioMask">
                    <div id="portfolioModal">
                                <div class="inner">
                                            <div id="portfolioModalClose">Close</div>
                                            <span class="data"></span>
                                </div>
                    </div>
        </div>

どんな助けでも大歓迎です！

4

4 に答える 4

1

jQueryのheight（）を起動したときにdivが非表示（display:none）の場合、常に高さ0が返されます。これは、実際にはページ上のスペースを占有していないためだと思います。表示されています。divを非表示にしておきたいが、高さを取得したい場合は、次のCSSを使用することをお勧めします。

position:absolute;
visibility: hidden;

非表示の可視性を使用すると、要素はdom内のスペースを占有しますが、表示されないようにします-したがって、高さがあります。絶対位置を使用すると、実際のページからポップアウトされるため、ページ上のコンテンツが高さ/幅によって押し出されることはありません。

私も個人的に追加したいです

left: -30000px;

一部の古いIEはこの回避策でうまく機能せず、ページからdivをフロートさせると、それらが表示されないことがわかりました。

于 2012-11-27T16:02:29.953 に答える
0

$（'＃portfolioModal'）。css（'height'）;を試してください。

アップデート：

// Now to use the Data and add it to the Modal Window...
$('#portfolioModal .inner .data').append('<h1>' + parsedData['name'] + '</h1>\n' + parsedData['desc'] + '', function(){
  var modalWidth = $('#portfolioModal').width(); // Get the Modal Window's Width
  var modalHeight = $('#portfolioModal').height(); // Get the Modal Window's Height

  alert(modalHeight);

  var left = (windowWidth / 2) - (modalWidth / 2); // Calculate the left margin for center alignment
  var top = (windowHeight / 2) - (modalHeight / 2); // And calculate the top margin for center alignment

  $('#portfolioModal').css({ // Append the Left and Top margin to the Modal Window
      'left': left,
      'top': top
  });

});
于 2012-11-27T15:10:23.313 に答える
0

ダイアログはdivにありますか？スパンの場合、常に0を返します。

于 2012-11-27T15:12:41.273 に答える
0

左と上の変数にピクセルを指定する必要があります。

var left = (1024 / 2) - (modalWidth / 2) + "px"; 
var top = (768 / 2) - (modalHeight / 2) + "px"; 

$('#portfolioModal').css({ 
   'margin-left': left,
   'margin-top': top
 });
于 2012-11-27T16:11:46.853 に答える