javascript Demo模態窗口
2024-05-06 14:12:35
供稿：網友
下面這個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 += "<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:" +
