javascript模态窗口Demo

不多介绍了,应该见很多了，见过很多网站用的是Jquery的插件,个人觉得不够灵活

下面这个Demo支持回调，可以直接引用modalDialog.js使用,不存在任何Jquery的影子

global.js

代码

modalDialog.js 文件代码如下:

代码

//Modaldialog
function modalDialog() {
    this.uri ="about:blank";         //地址
    this.title = null;      //标题
    this.width = 400;       //默认宽
    this.height = 300;      //默认高
    this.borderColor = "black"; //边框颜色
    this.borderWidth = 2;   //边框宽度
    this.callback = null;   //回调方法
    this.background = "black";
    this.titleBackground = "silver";
}
modalDialog.prototype.url = this.uri;  //这样不用扩展也是可以的但是在页面中只能提示找不到这个属性
modalDialog.prototype.title = this.title;
modalDialog.prototype.width = this.width;
modalDialog.prototype.height = this.height;
modalDialog.prototype.background = this.background;
modalDialog.prototype.borderWidth = this.borderWidth;
modalDialog.prototype.borderColor = this.borderColor;
modalDialog.prototype.titleBackground = this.titleBackground;
modalDialog.prototype.callback = this.callback;
//触发回调方法
modalDialog.prototype.call = function (callback) { if (callback != null) callback(this); if (this.callback != null) this.callback(); }
//显示
modalDialog.prototype.show = function () {
    var js = window.js;
    //在里面实现显示的细节
    var x = js.bodyWidth, y = js.bodyHeight;
    //先创建一个层遮罩整个body
    var zdiv = "zdiv";      //遮罩层id
    document.body.innerHTML += "<div id='" + zdiv + "' style='width:" + x + "px;height:" + y + "px;background-color:" +
    this.background + ";position:absolute;top:0;left:0;" +
    "filter:alpha(opacity=80);opacity:0.8;z-index:'></div>";

    var mdiv = "mdiv";     //模态窗口层id
    document.body.innerHTML += "<div id='" + mdiv + "' style='width:" + this.width + "px;height:" + this.height + "px;" +
    "border:solid " + this.borderWidth + "px " + this.borderColor + ";z-index:20;position:absolute;top:" +
    (y - this.height) / 2 + ";left:" + (x - this.width) / 2 + ";'>" +
    //加上标题
    (this.title != null ? "<div style='background:" + this.titleBackground + ";line-height:30px;padding:0 10px;width:100%'>" + this.title + "</div>" : "") +
    "<div style='padding:1px;'><iframe src='" + this.uri + "' frameborder='0' scrolling='no' style='width:" + (this.width) + "px;height:" +
    (this.title != null ? this.height - 30 : this.height) + "px;'></iframe></div></div>";
}
modalDialog.prototype.close = function () {
    document.body.removeChild(window.js.$("mdiv"));
    document.body.removeChild(window.js.$("zdiv"));
}

default.html 页面上创建modalDialog

代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>模态窗口Demo</title>
    
    <script type="text/javascript" src="global.js"></script>
    
    <script type="text/javascript" src="modaldialog.js"></script>
    <script type="text/javascript">
        var md;  //用于页面回调
        var uri = "/test.html";
        function showModalDialog() {

                //处理打开模态窗口
                var m = new modalDialog();
                m.uri = uri;
                m.title = "模态窗口";
                m.background = "white";
                m.borderColor = "orange";
                m.borderWidth = 2;
                m.titleBackground = "gold";
                m.callback = function () { m.close(); }
                // m.call();  这个回调方法在modalDialog的Uri中调用
                m.show();

                md = m;
            }
    </script>
    </style>
</head>
<body>
    <div>
    用javascript+css实现ModalDialog<br />
    Jquery框架里面有个插件也可以实现这种效果，不过我们说的是自己实现

    <br />
    <input id="btopenDialog" type="button" value="打点模态窗口!" onclick="showModalDialog()" />

    </div>
</body>
</html>

在modalDialog页面中使用window.parent.md.call()触发回调函数

源代码:ModalDialogDemo.rar [VS2010]