javascript Demo模態窗口

2019-11-21 00:56:14

字體：大中小

來源：轉載

供稿：網友

下面這個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:" + 
(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> 
<!--下面這個js文件為我們的公共js文件--> 
<script type="text/javascript" src="global.js"></script> 
<!--ModalDialog UI js文件--> 
<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> 