一、上图
二、原理
1.预先在html里写出遮罩层的样式和对话框的样式，并让他们display为none，通过按钮点击事件绑定js函数修改他们的display为block则可以实现这样的效果。
2.注意的小细节，为了保证对话框在遮罩层的上面，则需要使用z-index让对话框的优先级大于遮罩层，同时遮罩层的优先级也要大于原来的页面才能实现遮罩。
三、代码部分
1.html
<!-- 这是遮罩层 --><div id="pageShadow"></div><!-- 这里放的是对话框的内容 --><div id="dlg"><button class="niceButton4 right" onclick="closeShadow()">x</button><h3 class="content">这里一般放一些东西</h3></div><!-- 页面内容 --><div class="content"><h3>这里放主要内容<h3><button class="niceButton4" onclick="openShadow()">点击打开遮罩层</button></div>
2.css部分
*{margin: 0; padding: 0;}/* 按钮样式 */.niceButton4 {background-color: skyblue;border: none;border-radius: 5px;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;transition-duration: 0.4s;-webkit-transition-duration: 0.4s;}.niceButton4:hover {box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),0 17px 50px 0 rgba(0, 0, 0, 0.19);}/* 让 关闭按钮x 出现在对话框最右边 */.right{position: absolute;top:5px;right: 5px;}/* 遮罩层样式 */#pageShadow{width: 100%;height: 100%;position: absolute;z-index: 999;display: none; background: rgba(0, 0, 0, 0.6);}/* 对话框样式 */#dlg{width: 500px;height: 200px;background-color: #fff;border-radius: 8px;position: absolute;z-index: 99999;top:15%; /* 居中操作 */left: 50%;transform: translateX(-50%);display: none;}/* 字体样式 */.content{text-align: center;margin: auto;color:pink;}
3.js部分
// 获取domvar pageShadow = document.getElementById("pageShadow");var dlg = document.getElementById("dlg");// 打开遮罩层和对话框function openShadow(){pageShadow.style.display = "block";dlg.style.display = "block";}// 关闭遮罩层和对话框function closeShadow(){pageShadow.style.display = "none";dlg.style.display = "none";}
