JS +DIV+CSS弹出层并且后面有遮盖效果（首先要应用Jquery）
//获得当前页面高度
function GetPageHeight()
{
    if ($.browser.msie)
    {
        return documentpatMode == "CSS1Compat" ? document.documentElement.clientHeight :
                    document.body.clientHeight;
    }
    else
    {
        return self.innerHeight;
    }
}
//获得当前页面宽度
function GetPageWidth()
{
    if ($.browser.msie)
    {
        return documentpatMode == "CSS1Compat" ? document.documentElement.clientWidth :
                    document.body.clientWidth;
    }
    else
    {
        return self.innerWidth;
    }
jquery弹出div窗口}
//显示遮盖层
function ShowCoverDiv()
{
    //如果遮盖层已经存在，就删除它
    $("#coverdiv").remove();
    //设置BODY的样式(可选)
    $("body").css({ "position": "absolute" ,"margin-top":"0px","margin-left":"0px"});
    //创建出遮盖层
    $("body").append("<div id='coverdiv'></div>");
    //设置遮盖层的样式
    $("#coverdiv").css({ "display": "none", "left": "0px", "top": "0px", "position": "absolute", "z-index": "5", "background-color": "#777", "width": GetPageWidth(), "height": GetPageHeight(), "filter": "alpha(opacity=60)" });

}
//显示弹出层(参数为要显示的Div内部的Html内容)
function ShowPopDiv(innerHtml)
{
    //调用遮盖方法
    ShowCoverDiv();
    //创建弹出DIV
    $("body").append("<div id='TextDiv'></div>");
    //接受传进来的HTML标签
    if (innerHtml != null)
    {
        $(innerHtml).css({ "display": "block" });
        $(innerHtml).appendTo("#TextDiv");
    }
    //设置弹出层在弹出情况下的位置（居中）
    var margintop = (GetPageHeight() - ElementById("TextDiv").offsetHeight) / 2;
    var marginleft = (GetPageWidth() - ElementById("TextDiv").offsetWidth) / 2;
    $("#TextDiv").css({ "display": "none", "position": "absolute", "z-index": "9", "top": margintop, "left": marginleft });
    //渐渐显示出消息层
    $("#coverdiv").show("slow");
    $("#TextDiv").show("slow");
    $("#TextDiv").draggable(); //拖动
    //当页面大小改变，那么弹出层会始终居中,遮盖层的大小也随之改变
    size = function()
    {
        if (ElementById("coverdiv") != null && ElementById("TextDiv") != null)
            $("#coverdiv").css({ "width": GetPageWidth(), "height": GetPageHeight() });
        if (ElementById("TextDiv") != null)
        {
            var margintop = (GetPageHeight() - ElementById("TextDiv").offsetHeight) / 2;
            var marginleft = (GetPageWidth() - ElementById("TextDiv").offsetWidth) / 2;
            $("#TextDiv").css({ "top": margintop, "left": marginleft });
        }
    }
}
//隐藏遮盖层和弹出层
function closeDiv()
{
    $("#coverdiv").hide("slow");
    $("#TextDiv").hide("slow");
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。