代码实现，可以直接复制生成html文件演示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="/jquery/2.0.0/jquery.js"></script><title>遮罩层</title></head><style>.content{width: 100%;height: 100%;background-color: red;}.show-mask-btn {background: rgb(4, 208, 71);padding: 5px 10px;border-radius: 5px;cursor: pointer;}.show-mask-btn p {font-size: 12px;font-weight: 400;color: #ffffff;}.mask-box {position: fixed;min-height: 100vh;background-color: rgba(0,0,0,.5);opacity: 0.5;display:none;z-index: 999;width: 100%;}.hint-txt {width: 100%;color: #ffffff;text-align: center;height: 35px;line-height: 35px;}</style><body class="white-gradient-bg"><!-- 蒙版/遮罩层 --><div class="mask-box" id="download-box"><div class="hint-txt">1、点击右上角图标</div><div class="hint-txt">2、选择 在浏览器中 打开</div></div><!-- 你的内容 --><div class="content"><div class="doshow-mask-btn" id="show-mask-btn"><p>点击查看遮罩层</p></div></div></body></html><script>$('#show-mask-btn').click(function () {$('.mask-box').css('display','block');})</script>
这里有些需要注意的地方：
1、遮罩层div，一定要放在所有元素最上方。如下图标红色框框的实例
