在弹出窗口上使用固定定位的问题

Question

所以，我已经把这个问题作为一个我正在研究的项目，其中固定位置对按下按钮后显示的弹出窗口不起作用。问题出现在移动视口上，因为弹出窗口仅显示在移动设备上。

问题在于我需要弹出窗口有一个固定的位置，这样无论它们在页面上的哪个位置，它都将始终保留在用户屏幕的中间位置。

指向我的网页的链接是：http://bayron.nl/recepten-toevoegen-template.html

如果您将其调整为移动尺寸并向下滚动到下拉按钮（下图），然后单击该按钮。您将能够看到使用固定定位的弹出窗口，但它不起作用。

非常感谢任何帮助！

Answer 1

只需使用position即可获得它。 使用下面的css来获得相同的结果。

body, html {
  min-height:100%;
  height:100%;
  margin:0px;
  padding:0px;
}
.box {
  position:fixed;
  top:0px;
  left:0px;
  background:rgba(0,0,0,0.3);
  width:100%;
  height:100%;
}
.popup {
  position:absolute;
  top:50%;
  left:50%;
  width:200px; /* Change as your requirement */
  height:200px;  /* Change as your requirement */
  background:#fff;
  transform:translate(-50%, -50%);
  z-index:9999;
}

<div class="box">
  <div class="popup">
      popup
  </div>
</div>