0

私は次のHTMLを持っています:

<div id="modal">
   <div class="block-border" style="width: 900px; height: 450px;">
   xxx
   </div>
</div>

私はこのスクリプトを試しています：

var modal = document.getElementById('modal');
var modal_width = modal.width;
var modal_height = modal.height;
var window_width = window.width;
var window_height = window.height;
modal.style.left = window_width / 2 - modal_width / 2;
modal.style.top = window_height / 2 - modal_height / 2;

モーダル変数を確認すると、正しいように見えます。ただし、 modal_width および modal_height 変数は未定義と表示されます。幅と高さのスタイルを最初の div に移動しようとしましたが、まだ幅と高さが見つかりません。

4

2 に答える 2

2

document.getElementById('modal') まったくないため、この場合は機能しませんid='modal'...「モーダル」という名前のクラスしかありません

代わりに試してくださいdocument.getElementsByClassName('modal')[0]...

于 2013-10-28T15:17:53.310 に答える
1

よく考えてみると、私のコメントは答えです。

「幅」にはいくつかの異なる定義があるため、要素にwidth.

もちろん、スタイルで定義された幅を取得できます: modal.style.width- ただし、ユニットが取り付けられた状態で戻ってくるので、おそらく
parseInt(modal.style.width,10). .leftまた、これには...を使用している場合に必要となるパディングやボーダー スタイルは含まれませんbox-sizing:border-box。

全体として、おそらく の方が優れていmodal.offsetWidthます。この幅には常にボーダーとパディングが含まれ、センタリングに役立ちます。

そうは言っても、純粋な CSS ソリューションを検討してください。

.modal>div {
    width:900px;
    height:450px;
    position:absolute; /* or "fixed", depending on the desired effect */
    left:0; top:0; right:0; bottom:0;
    margin:auto;
}

すべてがうまくいけば、コンテンツのサイズに関係なく、モーダル ボックスが完全に中央に配置されます。うーん...コンテンツが画面よりも大きい場合、問題が発生する可能性がありますが、ほとんどの場合は問題ありません。

于 2013-10-28T15:18:06.223 に答える