js模擬類機制應用——封裝遮罩彈窗功能

js定義：

/**
 * 彈窗類，可繼承
 */
var Dialog = {
	/**
	 * 靜態屬性
	 */
	//記錄當前dialog個數
	dialogCounts: 0,
	
	/**
	 * 構造函數
	 * @param w 彈窗的寬度，單位px
	 * @param h 彈窗的高度，單位px
	 * @param html 彈窗內容，格式html
	 */
	creat: function(w,h,html) {
		/**
		 * 私有屬性
		 */
		var ww = w || 300;
		var hh = h || 200;

		//獲取瀏覽器可視區域寬高
		var winSize = function() {
		    var e = window,
		        a = 'inner';

		    if (!('innerWidth' in window )){
		        a = 'client';
		        e = document.documentElement || document.body;
		    }

		    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
		};
		
		//遮罩層
		var newDom = document.createElement("div");
		newDom.className = "webo_shade";
		newDom.style.position = "absolute";
		newDom.style.top = "0";
		newDom.style.left = "0";
		newDom.style.height = document.body.scrollHeight+"px";
		newDom.style.width = document.body.scrollWidth+"px";
		newDom.style.backgroundColor = "#000";
		newDom.style.filter = "alpha(opacity=50)";
		newDom.style.opacity = "0.5"; 
		newDom.style.zIndex = "998";
		newDom.style.display = "none";
		document.body.appendChild(newDom);
		
		//dialg層

		var windowWidth = winSize().width;
		var windowHeight = winSize().height;
		var dWin = document.createElement("div");
		dWin.className = "webo_dialog";
		dWin.style.position = "fixed";
		if (w > windowWidth) {
			dWin.style.left = "0";
		} else {
			dWin.style.left = (windowWidth - ww)/2 + "px";
		}
		if (h > windowHeight) {
			dWin.style.top = "0"; 
		}else{
			dWin.style.top =  (windowHeight - hh)/2 + "px";
		}
		dWin.style.width = ww+"px";
		dWin.style.height = hh+"px";
		dWin.style.backgroundColor = "#FFF";
		dWin.style.zIndex = "999";
		dWin.style.display = "none";
		dWin.innerHTML = html || "there is nothing.";
		
		newDom.appendChild(dWin);
		
		//關閉
		var clo = document.createElement("span");
		clo.className = "webo_dialog_close";
		clo.style.position = "absolute";
		clo.style.top = "1px";
		clo.style.right = "4px";
		clo.title = "關閉";
		clo.style.fontSize = "18px";
		clo.style.cursor = "pointer";
		clo.innerHTML = "×";
		dWin.appendChild(clo);
		
		//關閉按鈕監聽
		if(clo.addEventListener){
			clo.addEventListener("click",function(e){ 
				if (window.event != undefined) {  
					window.event.cancelBubble = true;  
				} else if (e.stopPropagation) {  
					e.stopPropagation();  
				}  
				example.kill();
			},false);
		}else if(clo.attachEvent){
			clo.attachEvent("onclick",function(e){  
				if (window.event != undefined) {  
					window.event.cancelBubble = true;  
				} else if (e.stopPropagation) {  
					e.stopPropagation();  
				}  
				example.kill();
			});
		}
		
		//實例化對象
		var example = {};
		example.show = function(){
			newDom.style.display = "block";
			dWin.style.display = "block";
		};
		example.hide = function(){
			dWin.style.display = "none";
			newDom.style.display = "none";
		};
		example.kill = function(){
			newDom.removeChild(dWin);
			document.body.removeChild(newDom);
			Dialog.dialogCounts--;
		};
		example.test = function() {
			alert("高度："+pageHeight());
		}
		this.dialogCounts++;
		//返回實例化的對象
		return example;
	}
}

頁面調用：

var t = Dialog.creat();
t.show();
var t1 = Dialog.creat(400,300,"hehe");
t1.show();
var t2 = Dialog.creat(400,300,"<p>hehe</p>");
t2.show();
alert(Dialog.dialogCounts);    //3