CSS3实现遮罩层效果
第一步、创建外层遮罩
先写个大盒子
<div id="box"></div>
再把盒子设置为固定定位，top、right、bottom、left都设置为0，并且不要设置宽高，这样子就实现大盒子铺满整个屏幕了,在设置个半透明背景颜色
#box{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(221, 221, 221, 0.5);}
效果就是这样子的
然后在大盒子里面写个小盒子装你的内容
<div id="box"><div><a href="javascript:void(0);">关闭</a></div></div>
设置下小盒子的css属性
#box div{width: 30%;height: 300px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);padding: 20px;background: #ffffff;border-radius: 10px;text-align: right;}
再然后效果就是这样子的
这样子除了小盒子里面的内容外面的都是选不了的，再配合js控制遮罩层的显示与隐藏
实现鼠标穿透遮罩层，而不穿透内容
有时候需要实现鼠标能够对下层的内容进行操作的而遮罩层又不隐藏的情况，只需要给父元素加上：pointer-events: none;
然后在给遮罩层的小盒子加上pointer-events: auto;就可以实现效果了
最后代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#box{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color: rgba(221, 221, 221, 0.5);pointer-events: none;}#box div{width: 30%;height: 300px;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);padding: 20px;background: #ffffff;border-radius: 10px;text-align: right;pointer-events: none;}</style></head><body><div id="box"><div><a href="javascript:void(0);">关闭</a></div></div></body></html>
