DIV CSS 佈局教程網

在工作過程中經常遇到做彈出的層效果，有的需要在元素右下彈出，有的需要彈出在浏覽器正中間，有的需要彈出後再拖拽，有的需要背景要變暗，有的需要彈出的層跟隨鼠標移動……

網上此類效果其實很多，有Javascript原生的，有基於框架寫的,但自己好多時候用不到那麼高級的效果，所以就把這些功能都分開來一步一步實現。

其實原理很簡單.有兩種實現途徑:一種是通過元素創建和刪除，一種是通過顯示和隱藏，其余的具體要做成什麼樣子，就留給CSS來控制了。下面從最簡單的開始（不基於框架）

一、最簡單的彈出

用到的Javascript代碼如下：

function show(){
	var oShow = document.getElementById('show');
	oShow.style.display = 'block';
	var oClose = document.createElement("span");
		oClose.innerHtml = "×";
		oShow.appendChild(oClose);
		oClose.onclick = function(){
			oShow.style.display = 'none';
			oShow.removeChild(this);
		}
}

點擊下面“運行”直接查看效果

 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

二、彈出層—到浏覽器中央

用到的Javascript代碼如下：

function show(){
	var iWidth = document.documentElement.clIEntWidth;	//獲取浏覽器寬度
	var iHeight = document.documentElement.clIEntHeight;	//獲取浏覽器高度
 
	var oShow = document.getElementById('show');
		oShow.style.display = 'block';
        oShow.style.left = (iWidth-302)/2+"px";	//居中橫坐標
		oShow.style.top = (iHeight-202)/2+"px";	//居中縱坐標
	var oClose = document.createElement("span");
		oClose.innerHtml = "×";
		oShow.appendChild(oClose);
		oClose.onclick = function(){
			oShow.style.display = 'none';
			oShow.removeChild(this);
		}
}

點擊下面“運行”直接查看效果

 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

三、彈出層—到浏覽器中央—背景變暗

用到的Javascript代碼如下：

function show(){
	var iWidth = document.documentElement.clIEntWidth;
	var iHeight = document.documentElement.clIEntHeight;
 
	var bgObj = document.createElement("div");	//創建背景層
	bgObj.setAttribute("id","bgbox");
	bgObj.style.width = iWidth+"px";
	bgObj.style.height =Math.max(document.body.clIEntHeight, iHeight)+"px";
	document.body.appendChild(bgObj);		//將創建的層插入body中
 
	var oShow = document.getElementById('show');
		oShow.style.display = 'block';
		oShow.style.left = (iWidth-302)/2+"px";
		oShow.style.top = (iHeight-202)/2+"px";
 
	var oClosebtn = document.createElement("span");
		oClosebtn.innerHtml = "×";
		oShow.appendChild(oClosebtn);
 
	function oClose(){
		oShow.style.display = 'none';
		oShow.removeChild(oClosebtn);
		document.body.removeChild(bgObj);		
	}
 
	oClosebtn.onclick = oClose;
	bgObj.onclick = oClose;
}

點擊下面“運行”直接查看效果

 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

四、彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出

鍵盤事件的Javascript代碼如下：

function getEvent(){
	return window.event || arguments.callee.caller.arguments[0];
	// 獲得事件Event對象，用於兼容IE和Firefox
}
 
document.onkeyup = function(){
	var event = getEvent();
	if (event.keyCode == 27){
		oClose();
	}
}

點擊下面“運行”直接查看效果

 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

四、彈出層—到浏覽器中央—背景變暗—支持鍵盤[Esc]退出—支持鼠標拖動

鼠標拖動的Javascript代碼如下：

var moveX = 0;
var moveY = 0;
var moveTop = 0;
var moveLeft = 0;
var moveable = false;
var docMouseMoveEvent = document.onmousemove;
var docMouseUpEvent = document.onmouseup;
titleBar =  document.getElementById('titlebar');
titleBar.onmousedown = function() {
	var evt = getEvent();
	moveable = true; 
	moveX = evt.clIEntX;
	moveY = evt.clIEntY;
	moveTop = parseInt(oShow.style.top);
	moveLeft = parseInt(oShow.style.left);
 
	document.onmousemove = function() {
		if (moveable) {
			var evt = getEvent();
			var x = moveLeft + evt.clIEntX - moveX;
			var y = moveTop + evt.clIEntY - moveY;
			if ( x > 0 &&( x + 302 < iWidth) && y > 0 && (y + 202 < iHeight) ) {
				oShow.style.left = x + "px";
				oShow.style.top = y + "px";
			}
		}	
	};
	document.onmouseup = function () { 
		if (moveable) { 
			document.onmousemove = docMouseMoveEvent;
			document.onmouseup = docMouseUpEvent;
			moveable = false; 
			moveX = 0;
			moveY = 0;
			moveTop = 0;
			moveLeft = 0;
		} 
	};
}

點擊下面“運行”直接查看效果

 [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

歡迎大家多提改進意見或建議，共同學習和探討