JS 页面居中显示DIV Message

1、创建一个js文件 divmessage.js

//信息窗口
var DivMessage = {
    //显示窗口
    show: function (obj) {
        var _div = document.getElementById("divMessage");
        var _menban = document.getElementById("divMenBan");
        if (_div != null) {
            document.body.removeChild(_menban);
            document.body.removeChild(_div);
        }
        var path = getBasePath();
        _div = document.createElement("div");
        _menban = document.createElement("div");
        var iWidth = document.documentElement.clientWidth;
        var iHeight = document.documentElement.clientHeight + document.documentElement.scrollTop * 2;
        var h, w;
        if (obj.height == null) {
            h = 100; //div 高
        }
        else {
            h = obj.height;76
        }
        if (obj.width == null) {
            w = 300;
        }
        else {
            w = obj.width; //div 宽
        }
        _menban.id = "divMenBan";
        _menban.style.top = "0px";
        _menban.style.left = "0px";
        _menban.style.display = "block";
        _menban.style.position = "absolute";
        _menban.style.width = iWidth + "px";
        _menban.style.height = iHeight + "px";
        _menban.style.background = "#000000";
        _menban.style.zIndex = 1000;
        _menban.style.filter = "Alpha(Opacity=30)";
        _menban.style.MozOpacity = "0.3";

        var table = document.createElement("table");
        table.id = "tMessage";
        table.border = 0;
        table.cellpadding = 0;
        table.style.backgroudColor = "White";
        table.style.border = "1px solid #336699";
        table.style.position = "static";
        // table.style.filter = "progid:DXImageTransform.Microsoft.DropShadow(color=#666666,offX=4,offY=4,positives=true)";  //阴影效果
        table.style.width = w;

        //标题行
        var trTitle = document.createElement("tr");
        trTitle.style.backgroundImage = "url('" + path + "/Scripts/images/bgx1.png')";
        trTitle.style.backgroundRepeat = "repeat-x";

        var td1 = document.createElement("td");
        td1.style.height = "10px";
        var title = "";
        if (obj.Title == null || obj.Title == "") {
            title = "消息"
        }
        else {
            title = obj.Title;
        }
        td1.innerHTML = "<b style='color:#FFFFFF;'>" + title + "</b>";

        var td2 = document.createElement("td");
        td2.align = "right";
        td2.innerHTML = "<img src='" + path + "/Scripts/images/x.png'  style='cursor: hand;' />";

        if (obj.clickOK != null && obj.clickOK != "") {
            if (window.addEventListener) {
                td2.addEventListener('click', closeme, false);
                td2.addEventListener('click', obj.clickOK, false);
            }
            else {
                td2.attachEvent('onclick', closeme);
                td2.attachEvent('onclick', obj.clickOK);
            }
        }
        else {
            td2.onclick = closeme;
        }
        trTitle.appendChild(td1);
        trTitle.appendChild(td2);

        //内容行
        var trContent = document.createElement("tr");
        var tdContent = document.createElement("td");
        tdContent.colspan = '2';
        tdContent.style.width = "100%";
        tdContent.align = "center";
        tdContent.innerHTML = "<b>" + obj.text + "</b>";
        trContent.appendChild(tdContent);

        //按钮行
        var trBottom = document.createElement("tr");
        var tdBottom = document.createElement("td");
        tdBottom.colspan = '2';
        tdBottom.style.width = "100%";
        tdBottom.align = "center";
        var tdBtnOK = document.createElement("input");
        tdBtnOK.type = "button";
        tdBtnOK.value = "确定";
        if (obj.clickOK != null && obj.clickOK != "") {
            if (window.addEventListener) {
                tdBtnOK.addEventListener('click', closeme, false);
                tdBtnOK.addEventListener('click', obj.clickOK, false);
            }
            else {
                tdBtnOK.attachEvent('onclick', closeme);
                tdBtnOK.attachEvent('onclick', obj.clickOK);
            }
        }
        else {
            tdBtnOK.onclick = closeme;
        }
        tdBottom.appendChild(tdBtnOK);
        trBottom.appendChild(tdBottom);

        table.appendChild(trTitle);
        table.appendChild(trContent);
        table.appendChild(trBottom);

        _div.id = "divMessage";
        _div.style.top = (iHeight - h) / 2 + "px";
        _div.style.left = (iWidth - w) / 2 + "px";
        _div.style.display = "block";
        _div.style.position = "absolute";
        _div.style.width = w + "px";
        _div.style.height = h + "px";
        _div.style.margin = "0 auto";
        _div.style.zIndex = 1001;

        _div.appendChild(table);
        document.body.appendChild(_menban);
        document.body.appendChild(_div);
        document.body.style.zIndex = 999;

    }
}
//关闭信息窗口
function closeme() {
    var _div = document.getElementById("divMessage");
    var _menban = document.getElementById("divMenBan");
    if (_div != null) {
        document.body.removeChild(_menban);
        document.body.removeChild(_div);
    }
}
//获取根路径
function getBasePath() {
    var curWwwPath = window.document.location.href;
    var pathName = window.document.location.pathname;
    var pos = curWwwPath.indexOf(pathName);
    var localhostPaht = curWwwPath.substring(0, pos);
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    return (localhostPaht + projectName);
}

 

2、HTML页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/divmessage.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ShowMessage() {
            DivMessage.show({
                width: 200, //长 可去掉
                height: 100, //高 可去掉
                text: "消息内容", //消息内容
                clickOK: function () {  //点击事件
                    alert('ddddd');
                }
            });
        }
    </script>
    <style type="text/css">
        body
        {
             font-size:12px;
            }
    </style>
</head>
<body>
<input type="button" value="显示" οnclick="ShowMessage();" />

</body>
</html>

注：需要两张图片

    Scripts/image/bgx1.png

 Scripts/images/x.png