使用 HTML5 和 CSS3 构建模态框：让你的网站交互更灵动

2024-01-05 18:44:13

作为前端开发人员，模态框是我们工具包中不可或缺的一部分。它们在各种场景中都必不可少，从显示提示信息和操作反馈，到加载动画和登录/注册表单。虽然 JavaScript 通常用于动态创建模态框，但它与渐进式增强和优雅降级原则的兼容性并不理想。幸运的是，使用 HTML5 和 CSS3，我们可以轻松构建出同样有效的模态框。

HTML5 的基础

HTML5 为我们提供了<dialog>元素，它专门用于创建模态对话框。这个元素有几个有用的属性，包括：

open：用于打开或关闭对话框
modal：强制浏览器将对话框显示为模态对话框，禁用背后的页面交互

为了创建基本的模态框，我们只需使用<dialog>元素并设置modal属性：

<dialog id="my-modal" modal>
  <h1>模态框标题</h1>
  <p>模态框内容</p>
  <button type="button">关闭</button>
</dialog>

CSS3 的修饰

接下来，让我们使用 CSS3 修饰我们的模态框，使其美观且易于使用：

#my-modal {
  position: fixed; /* 将模态框固定在页面上 */
  top: 50%; /* 垂直居中 */
  left: 50%; /* 水平居中 */
  transform: translate(-50%, -50%); /* 将模态框移动到中心 */
  background-color: #fff; /* 背景色 */
  padding: 20px; /* 内边距 */
  border: 1px solid #000; /* 边框 */
}

#my-modal::backdrop {
  position: fixed; /* 创建模态框背景 */
  top: 0; /* 全屏覆盖 */
  left: 0;
  width: 100%; /* 全屏覆盖 */
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */
}

#my-modal button {
  float: right; /* 按钮浮动到右上角 */
  margin-top: 10px; /* 按钮上边距 */
}

JavaScript 的交互

为了实现交互性，我们需要使用 JavaScript 打开和关闭模态框：

const modal = document.getElementById('my-modal');
const openButton = document.getElementById('open-modal');
const closeButton = document.querySelector('#my-modal button');

// 打开模态框
openModalButton.addEventListener('click', () => {
  modal.open = true;
});

// 关闭模态框
closeButton.addEventListener('click', () => {
  modal.open = false;
});