пытаясь получить абсолютный позиционированный div в центре другого относительного позиционного div - PullRequest
Новая
       1

пытаясь получить абсолютный позиционированный div в центре другого относительного позиционного div

0 голосов
/ 07 декабря 2011

http://jsfiddle.net/zjRga/55/

Я хочу, чтобы div открывался поверх текущего div и не сдвигал элементы, поэтому я использую абсолютное позиционирование, но я хочу, чтобы он был центрирован по горизонтали и вертикали в этом относительном div, где бы он ни находился на странице, и я не могу понять, правильно ли это.

UPDATE: Решаемые. Я думал об этом часами. Кому бы это ни помогло в будущем

http://jsfiddle.net/zjRga/60/

Краткий ответ: jQuery- element.position ()

Ответы [ 3 ]

0 голосов
/ 07 декабря 2011

Вам нужно проверить высоту и ширину элемента, на котором вы центрируете, и соответственно установить верхнюю и левую сторону. 

$('.labelEdit').click( function() {
    var x = $("#editDialog").width() / 2 - $("#editItemDialog").outerWidth() / 2;
    var y = $("#editDialog").height() / 2 - $("#editItemDialog").outerHeight() / 2;
    $("#editItemDialog").css({"top": y, "left": x});
    $('#editItemDialog').show('slow');
});

По сути, мы устанавливаем верхний угол в средней точкецелевой div минус половина высоты диалога, а левый в средней точке минус половина ширины диалога.

0 голосов
/ 07 декабря 2011 
$('#editItemDialog').hide();
$('#closeEditItemDialog').click( function() {
   $('#editItemDialog').hide('slow');
});

$('.labelEdit').hover( function() {
               $(this).parent().prev().css('border', 'solid 1px blue');    
             }, function() {
                $(this).parent().prev().css('border', 'solid 1px white'); 
});


$('.labelEdit').click( function() {
   $('#editItemDialog').center();
   $('#editItemDialog').show('slow');

});
jQuery.fn.center = function () {
   this.css("position","absolute");
   this.css("top", (($(window).height() - this.outerHeight()) / 2) +        $(window).scrollTop() + "px");
    this.css("left", (($(window).width() - this.outerWidth()) / 2) +  $(window).scrollLeft() + "px");
return this;
}

Я получил это от этот ответ

0 голосов
/ 07 декабря 2011

Ваш вопрос немного неясен. Вот что вам нужно: http://jsfiddle.net/zjRga/59/. Обратите внимание на изменения в #editItemDialog. Если это не совсем то, что вы ищете, я думаю, что по крайней мере это покажет вам, как центрировать абсолютно позиционированный div, для которого установлены ширина и высота.

...