给首页添加遮罩层，添加提示框

最近给详情页面做了一个遮罩提示，用户第一次登录之后会提示，然后下次登录就不显示。

首先考虑用到的是cookie，这样用户第一次进入到详情页，通过js种下一个cookie，然后下次登录再进行判断即可。

/*
    *设置Cookie 
    */
    function SetCookie(cookieName, cookieValue, nDays) {
        /**//* 当前日期 */
        var today = new Date();

        /**//* Cookie 过期时间 */
        var expire = new Date();

        /**//* 如果未设置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值   
    */
    function GetCookie(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 id="mask"  style="z-index:10000">
    </div>
    <div class="dbox-delate" style="display: none;z-index:10001" id="divSuccessed">
        <div class="title">
            <a href="javascript:void(0)" class="btnClose" 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)" class="btn-blue" 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
    {
        width: 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
    {
        width: 100%;
        overflow: hidden;
    }
    .dbox-delate .title a.btnClose
    {
        width: 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
    {
        width: 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>

 

给需要用到的同学们～