<?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>
原文：http://www.cnblogs.com/xs-yqz/p/5103495.html