纯 html, javascript 和 css 实现对话框

1. 对话框需要一个蒙层，和一个显示信息的窗口，所以至少应该有两个层次的结构。

<div class="dialog">
  <div class="dialog__body">
    <div>blalala</div>
  </div>
</div>
复制代码

.dialog 用来做蒙层。

.dialog {
  // 创建一个半透明的黑色的蒙层，充满整个用户界面
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #333333ee;
}
复制代码

.dialog__body 是显示信息的窗口

.dialog__body {
  background: white;
  // 让显示信息的窗口水平居中
  width: 80%;
  margin-left: 10%;
  // 距离顶部 100px，可调整
  height: 500px;
  margin-top: 100px;
}
复制代码

2. 接下要添加控制打开和关闭的按钮

<button class="trigger">打开对话框</button>
<div class="dialog">
  <div class="dialog__body">
    <div>blalala</div>
    <button class="dialog__close">关闭对话框</button>
  </div>
</div>
复制代码

默认不显示对话框

.dialog {
  display: none;
  // ... 同上
}
复制代码

添加一个类用来控制对话框的显示

.dialog--active {
  display: block;
}
复制代码

添加 JS 代码，打开对话框时，给 .dialog 添加 .dialog--active ，关闭时，移除 .dialog--active 。

// 打开对话框
var trigger = document.querySelector('.trigger');
trigger.addEventListener('click', function() {
  var dialog = document.querySelector('.dialog');
  if (!dialog.classList.contains('dialog--active')) {
    dialog.classList.add('dialog--active')
  }
})

// 关闭对话框
var closeBtn = document.querySelector('.dialog__close')
closeBtn.addEventListener('click', function () {
  var dialog = document.querySelector('.dialog');
  if (dialog.classList.contains('dialog--active')) {
    dialog.classList.remove('dialog--active')
  }
})
复制代码

3. 最后再添加点动画，让交互显得温和一点

@keyframes pop {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.dialog {
	// ...  同上
  animation: pop 0.3s;
}
复制代码

完整代码和演示

jsbin.com/ditatevegu/…