引言

在现代Web开发中，模态框（Modal）是常见的交互元素，用于在页面上显示额外的信息或控制面板。然而，手动实现一个优雅且功能齐全的模态框并不简单，它涉及到多个复杂的技术问题，如滚动穿透和tabindex管理。幸运的是，通过原生JavaScript和CSS，我们可以创建出既美观又实用的模态框。

滚动穿透与Tabindex问题

滚动穿透是指当模态框打开时，用户仍然可以滚动页面内容。Tabindex问题则是指如何正确地设置模态框的焦点，使其在打开时始终位于其他元素之上。

解决方案

1. 屏蔽外层容器滚动条：通过设置外层容器的overflow: hidden属性，可以防止用户在模态框打开时滚动页面。

2. 利用原生dialog能力：原生dialog组件提供了show()和close()方法，可以方便地控制模态框的显示和隐藏。

3. 确保模态框始终处于顶层：通过设置模态框的z-index属性，可以确保其在其他元素之上。然而，由于存在比该值更大的z-index的可能性，我们需要更巧妙的方法来确保模态框始终处于顶层。

代码示例

以下是一个简单的模态框实现示例：

<button onclick="dialog.show()">按钮</button>
<dialog class="dialog" id="dialog">
  <div class="form">
    <div class="form-title">登录</div>
    <div class="form-control">
      <label class="form-control-label">账号:</label>
      <input class="form-control-value"/>
    </div>
    <div class="form-control">
      <label class="form-control-label">密码:</label>
      <input type="password" class="form-control-value"/>
    </div>
    <button class="btn-submit" onclick="dialog.close()">登录</button>
  </div>
</dialog>

.dialog {
  border-width: 0;
  border-radius: 6px;
  transition-duration: .5s;
  opacity: 0;
  transform: scale(0.8);
}

.dialog.open {
  opacity: 1;
  transform: scale(1);
}

.dialog.open::backdrop {
  opacity: 1;
  transform: scale(1);
  background-color: # 32586823;
  backdrop-filter: blur(1px);
}

添加蒙层与过渡效果

为了使模态框看起来更优雅，我们可以添加一个蒙层（backdrop）并使用CSS过渡效果。

<button onclick="dialog.showModal()">按钮</button>
<dialog class="dialog" id="dialog">
  <!-- ... -->
</dialog>

.dialog {
  /* ... */
}

.dialog::backdrop {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dialog.open::backdrop {
  opacity: 1;
  transform: scale(1);
}

动画实现

通过改变模态框的透明度（opacity）和缩放（transform），我们可以实现一个平滑的过渡动画。

<script setup lang="ts">
function handleOpen() {
  const dialog = document.getElementById('dialog') as any;
  dialog.classList.add('open');
  requestAnimationFrame(() => {
    dialog.classList.add('open');
  });
}

function handleSubmit() {
  const dialog = document.getElementById('dialog') as any;
  dialog.classList.remove('open');
  setTimeout(() => {
    dialog.close();
  }, 200);
}
</script>

.dialog {
  /* ... */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.dialog.open {
  opacity: 1;
  transform: scale(1);
}

总结

通过原生实现模态框，我们不仅可以解决z-index层级覆盖的问题，还能规避滚动穿透和tabindex跑到蒙层下面的问题。由于是浏览器原生支持的，性能也会更好。希望这篇文章能帮助你优雅地实现一个功能齐全的模态框。