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="显示" onclick="ShowMessage();" />

</body>

</html>

注：需要两张图片


    Scripts/image/bgx1.png


 Scripts/images/x.png