摘要：
最近给详情页面做了一个遮罩提示，用户第一次登录之后会提示，然后下次登录就不显示。首先考虑用到的是cookie，这样用户第一次进入到详情页，通过js种下一个cookie，然后下次登录再进行判断即可。如果页面没有滚动条的话，可以直接设置成屏幕的高度。最后就是遮罩层和提示框了，把两个div嵌入到详情页即可。
最近给详情页面做了一个遮罩提示，用户第一次登录之后会提示，然后下次登录就不显示。
首先考虑用到的是cookie，这样用户第一次进入到详情页，通过js种下一个cookie，然后下次登录再进行判断即可。
/**设置Cookie */ functionSetCookie(cookieName, cookieValue, nDays) { /**//*当前日期 */ var today = newDate(); /**//*Cookie 过期时间 */ var expire = newDate(); /**//*如果未设置nDays参数或者nDays为0，取默认值 1 */ if (nDays == null || nDays == 0) nDays = 1; /**//*计算Cookie过期时间 */expire.setTime(today.getTime() + nDays * 24 * 60 * 60 * 1000); //获取毫秒数 /**//*设置Cookie值 */document.cookie = cookieName + "=" + escape(cookieValue) + ";expires=" +expire.toGMTString(); } /** 读取指定的Cookie值 */ functionGetCookie(cookieName) { /*Cookie 字符串 */ var theCookie = "" +document.cookie; /*找到cookieName的位置 */ var ind =theCookie.indexOf(cookieName); /*如果未找到cookieName，返回空字符串 */ if (ind == -1 || cookieName == "") return ""; /*确定分号的位置 */ var ind1 = theCookie.indexOf(';', ind); if (ind1 == -1) ind1 =theCookie.length; /*读取Cookie值 */ return unescape(theCookie.substring(ind + cookieName.length + 1, ind1)); } jQuery(function() { var firstlogin = GetCookie("firstlogin"); if (firstlogin && firstlogin.length > 0) { } else{ SetCookie("firstlogin", "yes", 999); masking.open("", "divSuccessed", 0.5); } });
其中masking.open("", "divSuccessed", 0.5)方法是用来弹出遮罩层的，具体方法如下：
//遮罩层 2014-05-13 var masking ={ //houseid:房源id //objId:弹出对话框id //opacity: float number between 0 and 1 open: function(houseid, objId, opacity) { var mask = document.getElementById('mask'); mask.style.display = ''; mask.style.position = 'absolute'; mask.style.zIndex = '10000'; mask.style.left = '0'; mask.style.top = '0'; mask.style.width = document.body.scrollWidth + "px"; mask.style.height = "4200px"; mask.style.backgroundColor = "#000"; if (/msie/i.test(navigator.userAgent)) { mask.style.filter = 'alpha(opacity=' + (opacity * 100) + ')'; } else{ mask.style.opacity =opacity; } this.openDiv(objId); this.houseid =houseid; //隐藏搜索框、topheader jQuery(".tr01")[0].style.position = "static"; document.getElementById("Div1").style.position = "static"; jQuery("em")[0].style.position = "static"; document.getElementById("divscroll").style.position = "static"; }, close: function(objId) { document.getElementById('mask').style.display = 'none'; this.closeDiv(objId); document.getElementById("divscroll").style.position = "fixed"; document.getElementById("Div1").style.position = "relative"; jQuery("em")[0].style.position = "relative"; }, openDiv: function(objId) { var obj =document.getElementById(objId); obj.style.top = "250px"; obj.style.display = "block"; }, closeDiv: function(objId) { var obj =document.getElementById(objId); obj.style.display = "none"; } };
其中heigt属性设置的比较大，考虑到页面有滚动条。如果页面没有滚动条的话，可以直接设置成屏幕的高度。
最后就是遮罩层和提示框了，把两个div嵌入到详情页即可。放到body标签内的任意位置均可
<div style="z-index:10000">
</div>
<div id="divSuccessed">
<div class="title">
<a href="javascript:void(0)" onclick="masking.close('divSuccessed')">
</a>
</div>
<p style="text-align: left">郑重提示：</p>
<p style="text-align: center">请您在签订租房合同之前，切勿支付任何形式的费用，以免上当受骗。</p>
<div class="btn">
<a href="javascript:void(0)" onclick="masking.close('divSuccessed')"id="confirmFinal">我知道了</a></div>
</div>
<style type="text/css">
/*dbox20140512 star--------------------*/.blod
{
font-weight: bold;
}
.ml20
{
margin-left: 20px;
}
.dbox-delate
{
400px;
padding: 10px 10px 15px;
line-height: 28px;
background: #fff;
border: 1px solid #cfcfcf;
position: absolute;
left: 50%;
top: 50%;
margin-left: -200px;
height: auto;
z-index: 100;
}
.dbox-delate .title
{
100%;
overflow: hidden;
}
.dbox-delate .title a.btnClose
{
16px;
height: 16px;
background: url(/rent/styles/Image/icoClose.gif) 0 50% no-repeat;
float: right;
cursor: pointer;
}
.dbox-delate .btn
{
padding-top: 15px;
text-align: center;
}
.dbox-delate .btn .btn-blue, .dbox-delate .btn .btn-org
{
90px;
height: 28px;
background: #398cd4;
border-radius: 4px;
color: #fff;
border: none;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.dbox-delate .btn .btn-org
{
background: #fe6203;
}
</style>给需要用到的同学们～