下面这个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
代码
复制代码 代码如下:
模态窗口demo
用javascript+css实现modaldialog
jquery框架里面有个插件也可以实现这种效果，不过我们说的是自己实现
在modaldialog页面中使用window.parent.md.call()触发回调函数
文件打包脚本之家下载