一个好用的前端阴影弹窗 

 <html>
    <!-- 弹窗 -->
 <style> 
   .black_overlay{ 
       display: none; //首先默认隐藏，需要弹出的时候改变css值
       position: absolute; 
       top: 0%; 
       left: 0%; 
       width: 100%; 
       height: 100%; 
       background-color: #3c3c3e; 
       z-index:1001; 
       -moz-opacity: 0.8; 
       opacity:.80; 
       filter: alpha(opacity=88); 
   } 
   .white_content{ 
       display: none; //首先默认隐藏，需要弹出的时候改变css值
       position: absolute; 
       top: 25%; 
       left: 25%; 
       width: 55%; 
       height: 55%; 
       padding: 20px; 
       border: 3px solid grey; 
       background-color: white; 
       z-index:1002; 
       overflow: auto; 
   } 
 </style>
 <div id="light" class="white_content" ></div>
 <div id="fade" class="black_overlay"></div> 
 
 </html>

 

其效果如下：

 

posted @ 2018-08-07 15:07  一粒小米-博客  阅读(305)  评论(0)  编辑  收藏  举报