javascript Demo模態(tài)窗口

更新時(shí)間：2009年12月06日 00:47:20 作者：

不多介紹了,應(yīng)該見很多了，見過很多網(wǎng)站用的是Jquery的插件,個(gè)人覺得不夠靈活。

下面這個(gè)Demo支持回調(diào)，可以直接引用modalDialog.js使用,不存在任何Jquery的影子
global.js

 
window.js = new myJs(); //為了避免名稱重復(fù)我們換個(gè)名稱,附加一個(gè)myJs對像到window對象上，然后我們在頁面中調(diào)用window.js 
//js對象 
function myJs() { 
this.x = 10; 
} 
//下面我們對myJs進(jìn)行擴(kuò)展 
myJs.prototype.alert = function (msg) { alert(msg); } //一個(gè)alert方法測試調(diào)用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 文件代碼如下:
代碼

復(fù)制代碼代碼如下:

 
//Modaldialog 
function modalDialog() { 
this.uri ="about:blank"; //地址 
this.title = null; //標(biāo)題 
this.width = 400; //默認(rèn)寬 
this.height = 300; //默認(rèn)高 
this.borderColor = "black"; //邊框顏色 
this.borderWidth = 2; //邊框?qū)挾?
this.callback = null; //回調(diào)方法 
this.background = "black"; 
this.titleBackground = "silver"; 
} 
modalDialog.prototype.url = this.uri; //這樣不用擴(kuò)展也是可以的但是在頁面中只能提示找不到這個(gè)屬性 
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; 
//觸發(fā)回調(diào)方法 
modalDialog.prototype.call = function (callback) { if (callback != null) callback(this); if (this.callback != null) this.callback(); } 
//顯示 
modalDialog.prototype.show = function () { 
var js = window.js; 
//在里面實(shí)現(xiàn)顯示的細(xì)節(jié) 
var x = js.bodyWidth, y = js.bodyHeight; 
//先創(chuàng)建一個(gè)層遮罩整個(gè)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"; //模態(tài)窗口層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 + ";'>" + 
//加上標(biāo)題 
(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 頁面上創(chuàng)建modalDialog
代碼

復(fù)制代碼代碼如下:

 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>模態(tài)窗口Demo</title> 
<!--下面這個(gè)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; //用于頁面回調(diào) 
var uri = "/test.html"; 
function showModalDialog() { 
//處理打開模態(tài)窗口 
var m = new modalDialog(); 
m.uri = uri; 
m.title = "模態(tài)窗口"; 
m.background = "white"; 
m.borderColor = "orange"; 
m.borderWidth = 2; 
m.titleBackground = "gold"; 
m.callback = function () { m.close(); } 
// m.call(); 這個(gè)回調(diào)方法在modalDialog的Uri中調(diào)用 
m.show(); 
md = m; 
} 
</script> 
</style> 
</head> 
<body> 
<div> 
用javascript+css實(shí)現(xiàn)ModalDialog<br /> 
Jquery框架里面有個(gè)插件也可以實(shí)現(xiàn)這種效果，不過我們說的是自己實(shí)現(xiàn) 
<br /> 
<input id="btopenDialog" type="button" value="打點(diǎn)模態(tài)窗口!" onclick="showModalDialog()" /> 
</div> 
</body> 
</html> 