纯 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/…

对话框打开时，防止页面继续滚动

一般我们使用对话框，都是为了阻止用户在完成对话框的功能前，继续使用页面。

所以，如果页面内容很长，有滚动条的话，我们需要将滚动条进行隐藏，步骤如下：

1. 找到滚动元素
2. 在打开对话框时，将滚动元素的 overflow 属性设为 hidden
3. 在关闭对话框时，将滚动元素的 overflow 属性设为默认值

// ...
if (!dialog.classList.contains('dialog--active')) {
    // ...
    document.scrollingElement.style.overflow = 'hidden';

}

// ...
if (dialog.classList.contains('dialog--active')) {
    // ...
    document.scrollingElement.style.overflow = 'revert';
}

在线代码演示 jsbin.com/zefunuw/edi…