从零开始，打造纯 HTML、Javascript 和 CSS 对话框

2023-11-05 01:13:12

前言

对话框，又称模态窗口或弹出窗口，在网页设计中广泛应用。它可以用来显示重要信息、收集用户输入、确认操作等。对话框通常会在页面上占据中心位置，并在用户完成操作之前阻止他们与页面其他部分进行交互。

HTML 结构

首先，我们需要使用HTML来创建对话框的基本结构。

<div class="dialog">
  <div class="dialog__body">
    <div class="dialog__content">
      <h1>对话框标题</h1>
      <p>对话框内容</p>
    </div>
    <div class="dialog__buttons">
      <button class="dialog__button dialog__button--primary">确定</button>
      <button class="dialog__button dialog__button--secondary">取消</button>
    </div>
  </div>
</div>

在这个结构中，.dialog元素是一个覆盖整个页面的半透明蒙层，.dialog__body是对话框主体，.dialog__content包含对话框的标题和内容，.dialog__buttons包含两个按钮，分别是确定和取消按钮。

CSS 样式

接下来，我们使用CSS来设置对话框的样式。

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog__body {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}

.dialog__content {
  margin-bottom: 20px;
}

.dialog__buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.dialog__button {
  margin-right: 10px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  cursor: pointer;
}

.dialog__button--primary {
  background-color: #337ab7;
  color: white;
}

.dialog__button--secondary {
  background-color: white;
  color: #337ab7;
}

这个样式表设置了对话框的布局、样式和交互效果。

JavaScript 脚本

最后，我们使用JavaScript来控制对话框的显示和关闭。

const dialog = document.querySelector('.dialog');
const dialogBody = document.querySelector('.dialog__body');

// 显示对话框
const showDialog = () => {
  dialog.classList.add('active');
  dialogBody.classList.add('active');
};

// 关闭对话框
const closeDialog = () => {
  dialog.classList.remove('active');
  dialogBody.classList.remove('active');
};

// 为按钮添加点击事件监听器
document.querySelector('.dialog__button--primary').addEventListener('click', closeDialog);
document.querySelector('.dialog__button--secondary').addEventListener('click', closeDialog);

这个脚本定义了一个showDialog函数和一个closeDialog函数，分别用于显示和关闭对话框。同时，为确定和取消按钮添加了点击事件监听器，当点击这些按钮时，对话框将关闭。

完整示例

将HTML、CSS和JavaScript代码组合在一起，我们就得到了一个完整的对话框组件。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <button onclick="showDialog()">打开对话框</button>

  <div class="dialog">
    <div class="dialog__body">
      <div class="dialog__content">
        <h1>对话框标题</h1>
        <p>对话框内容</p>
      </div>
      <div class="dialog__buttons">
        <button class="dialog__button dialog__button--primary">确定</button>
        <button class="dialog__button dialog__button--secondary">取消</button>
      </div>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>