Question

我想要打开一个div，它将显示在当前div的顶部，并且不会移动元素，所以我使用绝对定位，但我希望它在相对div中水平和垂直居中，无论它在哪里在页面上，我似乎无法正确使用它。

更新：解决了。几个小时以来我一直站在这里。对于将来可能有所帮助的任何人

简答：jQuery- element.position（）

Answer 1

你的问题有点不清楚。以下是您可能想要的内容：http://jsfiddle.net/zjRga/59/。请注意#editItemDialog的更改。如果这不是您正在寻找的，我认为至少它会告诉您如何将一个绝对定位的div设置在其上，并设置宽度和高度。

Answer 2

您需要检查您居中的元素的高度和宽度，并相应地设置顶部和左侧。

$('.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的中点处的顶角设置为对话框高度的一半，中间点的左侧减去对话框宽度的一半。

Answer 3

$('#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;
}

我是从this answer

得到的

试图让一个绝对定位的div在另一个相对定位的div中居中

3 个答案: