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

试试这个：首先，为父元素设置一个relative位置：

#pagecontent {position:relative;}

然后，设置模态窗口的absolute位置也有 atop和left值 by 50%：

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

最后，只需根据它设置模态窗口的和margin-top（margin-left负）除以二：heightwidth

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

演示：http: //jsfiddle.net/tovic/2QVX8/24/

于 2012-07-14T19:48:28.273 回答
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 回答