Центрирование модального окна в середине div

Я пытаюсь центрировать модальное диалоговое окно посередине (по вертикали и горизонтали) внешнего 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, в котором я пытаюсь центрировать модальное окно.

Любая помощь будет принята с благодарностью.

Заранее спасибо Карлос


html jquery modal-dialog centering window
person csosa    schedule 14.07.2012    source источник
comment
Вам, как новому пользователю, может быть запрещено публиковать изображения в своих вопросах. Если вы опубликуете URL-адрес изображения, которое хотите добавить к своему вопросу, я отредактирую его от вашего имени.   -  person David says reinstate Monica    schedule 14.07.2012

Ответы (2)


arrow_upward
0
arrow_downward

Попробуйте это: сначала установите родительский элемент с позицией relative:

#pagecontent {position:relative;}

Затем установите модальное окно с позицией absolute, которое также имеет значения top и left на 50%:

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

Наконец, просто установите margin-top и margin-left (отрицательное) модального окна на основе его height и width, разделенных на два:

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

ДЕМО: http://jsfiddle.net/tovic/2QVX8/24/< /а>

person Taufik Nurrohman    schedule 14.07.2012
comment
Я хотел бы предложить следующее изменение вашего ответа: position:fixed вместо абсолютного и добавление z-index:9999 - person Fresheyeball; 14.07.2012
comment
@Fresheyeball: я так не думаю, как вопрос выше: я пытаюсь центрировать модальное диалоговое окно посередине (по вертикали и горизонтали) внешнего div. fixed position уничтожит модальную позицию и переместит позицию на основе экрана, а не на основе родительского элемента. z-index, нормально. - person Taufik Nurrohman; 14.07.2012
comment
@Taufix Мой плохой. Тогда просто z-index. - person Fresheyeball; 15.07.2012

arrow_upward
0
arrow_downward

Без упомянутой картинки или ссылки на живой сайт трудно дать точный ответ.

Тем не менее, просматривая свой код, вы центрируете элемент, но не рассматриваете какие-либо 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():

Описание. Получите текущую вычисленную высоту для первого элемента в наборе совпадающих элементов, включая отступы, границы и, возможно, поля. Возвращает целочисленное (без пикселей) представление значения или null, если вызывается для пустого набора элементов.

.outerHeight([includeMargin])

includeMargin Логическое значение, указывающее, следует ли включать в расчет поля элемента.

введите здесь описание изображения

person Zuul    schedule 15.07.2012