很多网站,当点了一个按钮后,弹出一个窗口,底层变透明不可选,就是用到层的概念,至少三层
第一层,底层原始层
第二层,遮罩层,用到positon: fixed; top bottom left right 全为0;再加一个透明度opacity: 0.5;
第三层,弹出层,
当然这几层得有个顺序,z-index 数字越大越在顶层。最后就是用js实现display为none;
<body> <div style="position: fixed;top: 50%;left: 50%;margin-top: -150px;margin-left: -250px; z-index: 10;width: 500px;height: 300px;background-color: gold;"></div> <div style="position: fixed;z-index: 9;top: 0;bottom:0;left: 0;right: 0;background: #000;opacity: 0.5;"></div> <div style="width: 100%;height: 2000px;background-color: #4affe5; border: 1px solid #ff0f1e; margin: 0 auto;"></div> </body>