遮罩层 

<?php
/*
 * 
 * @Authors peng--jun 
 * @Email   1098325951@qq.com
 * @Date    2016-01-05 18:17:11
 * @Link    http://www.cnblogs.com/xs-yqz/
 * @version $Id$
 ==========================================
 */
 ?>
 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>遮罩层</title>
     <meta name="description" content="">
     <meta name="keywords" content="">
     <link href="" rel="stylesheet">
     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
     <style>
         .content{background-color: #ccc;width: 600px;height: 400px;margin: 0 auto;}
         .content>p{background-color: #000;color: #fff;position: relative;top: 300px;width: 40px;text-align: center;height: 20px;line-height: 20px;cursor: pointer;}

         .textpad{
             width: 100%;
             height: 100%;
             display:none; 
             position: fixed;
             top: 0;    
             background-color: rgba(27, 27, 27, 0.6);
         }
         .text-content{
             position: fixed;
             top: 25%;
             width: 100%;
             min-width: 800px;
             height:50%;
             background-color: #134791;
         }
         .text-content .text{color: #fff;}
         .text-content  p.close{float: right;right:20px;position: relative; color: #fff;cursor: pointer;}
     </style>
     <script type="text/javascript">
     $(document).ready(function(){

         $("#zhezhao").click(function(){
             $(".textpad").fadeIn();

         });
         $(".close").click(function(){
         $(".textpad").fadeOut();
         });
     });
     </script>
 </head>
 <body>
     <div class="content">这是我的内容
         <p id="zhezhao">遮罩</p>
     </div>

     <div class="textpad">
         <div class="text-content">
         <p class="close">关闭</p>
             <p class="text">我是上面的内容</p>
         </div>
     </div>
 </body>
 </html>

 

posted @ 2016-01-05 18:57  小军的代码库  阅读(142)  评论(0)    收藏  举报