如何水平居中可拖动模态

Question

我有一个弹出窗口 window，它应该是 position:fixed 并且可以拖动。问题是，每当 window 弹出时，它都会使用 css 过渡，因此它的所有属性都是动画的。我曾尝试使用 left:50% transformX:(-50%) 将其水平居中，但弹出窗口 window 在出现时水平跳跃（因为它为变换设置动画）。我也试过用 left:0 right:0 margin:0 auto 居中；但是当您开始拖动时 window 也会跳出位置。这些问题仅在 window 首次出现或第一次拖动时出现，第一次拖动后一切正常。

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

elem.draggable({ start: function() {

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

} });

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

这个 fiddle 以 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 来置换元素的宽度（即，基于元素宽度一半的负左边距；在本例中 -40px 因为元素的宽度固定为 80px).

Updated Example

.box {
  border-radius: 5px;
  padding: 10px 15px 10px 15px;
  min-width: 30px;
  width: 80px;
  height: 80px;
  left: 50%;
  margin-left: -40px;
  position: fixed;
  /* ... */
}

如何水平居中可拖动模态

How to horizontally center draggable modal

css

jquery-ui-draggable