如何使模态保持在屏幕中心 - Javascript

介绍

当我们使用模态框时，通常希望它始终处于屏幕中心，无论用户滚动页面，但默认情况下模态框会随着用户滚动而滚动，这可能会导致模态框消失在屏幕外，或者出现在屏幕边缘。

在本文中，我们将介绍如何通过Javascript将模态框保持在屏幕中心。

方案一：绝对定位

一种简单的方法是为模态框应用绝对定位，并设置它的位置以确保始终处于屏幕中心。

在html代码中添加以下内容：

<div class="modal" id="modal">
  <div class="modal-content">
    <p>This is some modal content</p>
  </div>
</div>

然后，在CSS中将模态框应用绝对定位样式，并使用Javascript将其位置设置为屏幕中心：

.modal {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// 获取模态框元素
const modal = document.getElementById('modal');

// 计算模态框的宽度和高度
const modalWidth = modal.offsetWidth;
const modalHeight = modal.offsetHeight;

// 将模态框在屏幕中心位置
modal.style.left = `calc(50% - ${modalWidth / 2}px)`;
modal.style.top = `calc(50% - ${modalHeight / 2}px)`;

方案二：使用固定位置

另一个方法是给模态框应用固定定位，并将其位置设置为0，以确保始终处于屏幕顶部和左侧。

在html代码中添加以下内容：

<div class="modal-fixed" id="modal-fixed">
  <div class="modal-content">
    <p>This is some modal content</p>
  </div>
</div>

然后，在CSS中将模态框应用固定定位样式，并在Javascript中将其位置设置为0：

.modal-fixed {
  position: fixed;
  top: 0;
  left: 0;
}

// 获取模态框元素
const modalFixed = document.getElementById('modal-fixed');

// 将模态框设置在屏幕顶部和左侧
modalFixed.style.top = 0;
modalFixed.style.left = 0;

总结

以上两种方案都是有效的方法来确保模态框始终保持在屏幕中心。我们可以根据实际需求选择将模态框应用绝对定位或固定定位样式，并使用Javascript将其位置设置为屏幕中心或顶部和左侧。