模态内容(链接窗口)停留在模态背景后面

在开发 web 应用程序时，模态框是经常用到的一种 UI 控件。模态框以覆盖整个页面的方式展现，让用户无法操作背后的内容，而是只能和模态框中的内容进行交互。在某些场景下，我们希望模态框上的某些内容不会随着用户的操作而移动，保持在背景的位置上。这时，就需要将模态框的链接窗口停留在模态背景后面。

实现方式

实现模态内容(链接窗口)停留在模态背景后面的方式有很多种，下面介绍一种基于 CSS 的实现方法。

首先，在模态框中定义一个包裹链接窗口的容器，并给此容器添加以下样式：

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

这样，链接窗口就会以容器为基准居中展示。

其次，给链接窗口添加以下样式：

.modal-link-container a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

这样，链接窗口就会覆盖在容器的最上层，但是由于 pointer-events: none 的设置，用户无法通过点击链接触发链接窗口。

最后，为模态框的背景添加以下样式：

.modal-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

这个样式会让背景展示出半透明的效果，并将背景的 z-index 设置成比链接窗口容器小，从而让链接窗口停留在背景后面。

总结

通过上述方式，我们可以实现模态内容(链接窗口)停留在模态背景后面的效果。在实际项目中，我们可以根据具体需求和实现难度来决定采用哪一种实现方式。