0

外側の div の中央 (垂直および水平) にモーダル ダイアログ ウィンドウを配置しようとしています。モーダル ウィンドウに jquery プラグインを使用しています。ここに私が達成しようとしているものの写真があります

私が持っている現在のコードでわかるように、ほぼ中央に配置されていますが、静かではありません。ここに私のJavaScriptコードがあります

$(id).css('top', $('#pagecontent').position().top + ($('#pagecontent').height() / 2) - ($(id).height() / 2));
$(id).css('left', $('#pagecontent').position().left + ($('#pagecontent').width() / 2) - ($(id).width() / 2));

pagecontent は、モーダル ウィンドウを中央に配置しようとしている div の四角形です

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

前もってありがとう カルロス

4

2 に答える 2

0

上記の写真やライブサイトへのリンクがなければ、正確な答えを提供することは困難です。

それでも、コードを見ると、要素が中央に配置されていますが、要素またはその親に適用される可能性のあるものは考慮されていませmarginんpadding。

実例：

次の例を想定して、必要な修正を加えてコードを適用します。

次のマークアップを想定しています。

<div id="pagecontent">
  <div id="foobar">I'm at the very middle!</div>
</div>

次のCSSを使用します。

#pagecontent {
  margin: 10px;
  padding: 10px;
  height: 240px;
  width: 360px;
  border: 1px solid #D9D9D9;
  position: relative;
}

#foobar {
  position: absolute;
  width: 200px;
  height: 20px;
  line-height: 20px;
  border: 1px solid blue;
}

jQueryコードは次のように改善できます。

var $inner   = $('#foobar'),
    $wrapper = $('#pagecontent');

$inner.css({
    'top'  : ($wrapper.outerHeight() / 2) - ($inner.outerHeight(true) / 2),
    'left' : ($wrapper.outerWidth() / 2) - ($inner.outerWidth(true) / 2)
});

詳細な説明：

jQueryを使用して要素の幅と高さを収集し、同時にパディングとマージンの宣言によって占有されるスペースを取得するには、次を使用できます。

jQuery .outerWidth（）関数：

説明：パディングや境界線など、一致した要素のセットの最初の要素について現在計算されている幅を取得します。

.outerWidth（[includeMargin]）

includeMargin要素のマージンを計算に含めるかどうかを示すブール値。

要素幅モデルボックス

jQuery .outerHeight（）関数：

説明：パディング、境界線、オプションでマージンなど、一致した要素のセットの最初の要素について現在計算されている高さを取得します。値の整数（「px」なし）表現を返します。空の要素セットで呼び出された場合はnullを返します。

.outerHeight（[includeMargin]）

includeMargin要素のマージンを計算に含めるかどうかを示すブール値。

ここに画像の説明を入力してください

于 2012-07-15T05:09:55.070 に答える
0

これを試してください: まず、親要素にrelative位置を設定します:

#pagecontent {position:relative;}

次に、との値absoluteも持つ位置でモーダル ウィンドウを設定します。topleft50%

#modal {
  position:absolute;
  top:50%;
  left:50%;
}

最後に、モーダル ウィンドウのmargin-topand margin-left(負) をそれに基づいて設定し、2heightでwidth割った値を設定します。

$id.css({
    'margin-top': -($id.outerHeight() / 2),
    'margin-left': -($id.outerWidth() / 2)
});

デモ: http://jsfiddle.net/tovic/2QVX8/24/

于 2012-07-14T19:48:28.273 に答える