Question

我有一个弹出窗口应该是position:fixed并且可以拖动。问题是每当弹出窗口时，它都会使用css转换，因此它的所有属性都是动画的。我试图使用left:50% transformX:(-50%)水平居中，但弹出窗口出现时会水平跳跃（因为它会为变换设置动画）。我也试过用左边居中：0右：0边距：0自动;但是当你开始拖动时，窗口也会跳出位置。这些问题仅在窗口首次出现或第一次拖动时出现，在第一次拖动后，一切按预期工作。

我将以下选项传递给可拖动的setter。

elem.draggable({ start: function() {

$(this).css({transform: "none", top: $(this).offset().top+"px", left:$(this).offset().left+"px"});

} });

这个小提琴以margin:0 auto为中心 here is a fiddle demonstrating my problem

这个小提琴以left:50% transform:translateX(-50%);

为中心

second fiddle

Answer 1

您是否尝试过给模态宽度然后使用margin：0 auto;典型的是，为了使元素居中，您需要为元素赋予宽度。

.centeredElement {
    margin: 0 auto;
    width: 960px;
}

Answer 2

问题在于margin: 0 auto依赖于元素的left和right属性设置为0的事实。您正在看到跳转，因为jQuery UI操纵left定位，拖动元素后它不再是0。这同样适用于transformX:(-50%)方法。如果left设置为50%，则只会水平居中元素。

解决方法是设置left: 50%，然后添加margin-left: -40px以替换元素的宽度（即，基于元素宽度的一半的负左边距;在这种情况下{{1因为元素的固定宽度为-40px）。

Updated Example

80px

如何水平居中可拖动模态

2 个答案: