Question

我使用以下代码关闭另一个弹出窗口后将打开一个弹出窗口：

function closeDeleteFilePopup() {
  $('#overlay_form_deleteGenFile').fadeOut(100, function completefadeOutCallback() {
    $('#overlay_form_uploadGenFile').fadeIn(100);
    positionPopupForFileSection();
  });
}

我的定位方法是：

function positionPopupForFileSection() {
  var popup = $('.overlay_form:visible');
  popup.css({
    marginLeft: -(popup.outerWidth() / 2),
    top: ($(window).height() > popup.outerHeight() ? ($(window).height() - popup.outerHeight()) / 2 : 20),
    marginTop: $(window).height() / 2
  });

它没有在屏幕中间打开弹出窗口。我只希望与页面滚动无关，只需在屏幕正中央打开弹出窗口即可。

我该怎么做？

Answer 1

marginLeft应该是窗口/屏幕宽度2的宽度减去弹出窗口2的宽度。

marginLeft: (window.innerWidth / 2) - (popup.outerWidth() / 2)

(window.innerWidth / 2)-弹出窗口的x将首先位于屏幕中央

- (popup.outerWidth() / 2)-我们减去弹出窗口的宽度，以便x可以调整并使其看起来像锚定在中间。

Answer 2

将此CSS应用于您的弹出窗口（容器）。

position: fixed; 
top: 50%; 
left: 50%; 
transform: translate(-50%, -50%);

Answer 3

使用CSS做得更好，看看我的解决方案，这是绝对垂直/水平居中的通用解决方案，这取决于您使用JS还是CSS

function positionPopupForFileSection() {
  var popup = $('.overlay_form');
  popup.css({
    'top': '50%',
    'left': '50%',
    'transform': 'translate3d(-50%, -50%, 0)'
  });
}

positionPopupForFileSection();

body {
  width: 400px;
  height: 400px;
  background: #eee;
}
.overlay_form {
  width: 200px;
  height: 200px;
  background: crimson;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="overlay_form"></div>

如何在屏幕中央打开弹出窗口？

3 个答案: