代码演示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style># 文本框.content{height: 1800px;background-color: white;}# 遮挡框.shade{position: fixed;top:0;left: 0;right: 0;bottom: 0;background-color: gray;opacity: 0.7;}# 模态框.model{width: 200px;height: 200px;background-color: bisque;position: absolute;top:50%;left: 50%;margin-top: -100px;margin-left: -100px;}# 隐藏.hide{display: none;}</style></head><body><div class="content"># 绑定显示事件<button onclick="show()">show</button> hellohellohellohellohellohellohellohellohellohellohellohello</div><div class="shade hide"></div># 绑定隐藏事件<div class="model hide"><button onclick="cancel()">cancel</button></div><script># 设置显示函数function show() {var ele_shade=document.getElementsByClassName("shade")[0];var ele_model=document.getElementsByClassName("model")[0];ele_model.classList.remove("hide");ele_shade.classList.remove("hide");}# 设置取消函数function cancel() {var ele_shade=document.getElementsByClassName("shade")[0];var ele_model=document.getElementsByClassName("model")[0];ele_model.classList.add("hide");ele_shade.classList.add("hide");}</script></body></html>
