如何在javascript/jquery中显示相对于视图的弹出元素，而不是网页？

<div id="popupElement">
  <!-- 弹出元素的内容 -->
</div>

#popupElement {
  position: absolute;
  display: none;
  /* 其他样式属性 */
}

// 显示弹出元素
function showPopupElement() {
  var popup = $("#popupElement");
  popup.show();
  // 设置弹出元素相对于视图的位置
  popup.css({
    top: "50%",
    left: "50%",
    transform: "translate(-50%, -50%)"
  });
}

// 隐藏弹出元素
function hidePopupElement() {
  $("#popupElement").hide();
}

// 在某个事件或函数中调用显示弹出元素的方法
$("#button").click(function() {
  showPopupElement();
});

// 在某个事件或函数中调用隐藏弹出元素的方法
$("#closeButton").click(function() {
  hidePopupElement();
});