javascript Demo模态窗口_javascript技巧

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

复制代码 代码如下:

window.js = new myJs(); //为了避免名称重复我们换个名称,附加一个myJs对像到window对象上，然后我们在页面中调用window.js
//js对象
function myJs() {
this.x = 10;
}
//下面我们对myJs进行扩展
myJs.prototype.alert = function (msg) { alert(msg); } //一个alert方法测试调用js.alert('弹出提示');
//获取制定Id的dom对象
myJs.prototype.$ = function (id) { return document.getElementById(id); }
myJs.prototype.bodyWidth = document.documentElement.clientWidth;
myJs.prototype.bodyHeight = document.documentElement.clientHeight;
myJs.prototype.body = document.body;

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 += "

";
var mdiv = "mdiv"; //模态窗口层id
document.body.innerHTML += "

" +
//加上标题
(this.title != null ? "

" + this.title + "

" : "") +
"

";
}
modalDialog.prototype.close = function () {
document.body.removeChild(window.js.$("mdiv"));
document.body.removeChild(window.js.$("zdiv"));
}

default.html 页面上创建modalDialog
代码

复制代码 代码如下:

用javascript+css实现ModalDialog

Jquery框架里面有个插件也可以实现这种效果，不过我们说的是自己实现

在modalDialog页面中使用window.parent.md.call()触发回调函数
文件打包脚本之家下载