最近弄圈子，用了这种风格，想让用户不用进去就可以浏览一些信息，经过查资料，弄了一个遮罩。现在分享给有需要的人。

CSS部分，直接创建一个css文件，在模板页面引入就行。
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0;
}
#dialog {
background-color:#fff;/* 背景颜色 */
border:5px solid rgba(0,0,0, 0.8);/* 边框样式 */
height:98%;/* 高度 */
margin:-200px 0 0 -200px;/* 外边距 */
padding:1px;
position:fixed !important; /* 浮动对话框 */
position:absolute;
width:97%;/* 宽度 */
z-index:5;
border-radius:5px;
display:none;/* 隐藏元素 */
margin: 0 auto;
overflow:auto;/* 对超出的内容进行滚动，如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 */
}

js部分
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
  var bh = $("body").height();
  var bw = $("body").width();
  $("#fullbg").css({
    height:bh,
    width:bw,
    display:"block"
  });
 $("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#dialog").hide();
}
</script>


<div id="dialog">

这里是遮罩内的内容，可以用标签来获取内容
例如：

<div> 
{qb:hy name="news_list_page_listdata1" type="cms" rows="3" order="list" mid="4"}

小区名字：{$rs.s_ssxq}&nbsp; 面积：{$rs.s_mj}
发布时间：{$rs.create_time|date="Y-m-d",###}
{/qb:hy} 

</div>

打开遮罩就用a标记就行：javascript:showBg();

<a href="javascript:showBg();" ><ul><li class='img'><span><em class="{$logo}"></em></span></li><li class='title'>{$title}</li></a>

关闭用onclick="closeBg(); 

我是直接在td里用的，P标签之类的都可行。

<td style="width: 30px; background-color:#E53333;color:#FFFFFF;"  onclick="closeBg();">关闭</td>