DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網頁制作教程:彈出層詳解
網頁制作教程:彈出層詳解
編輯: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 全部選擇 提示:你可先修改部分代碼,再按運行]

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

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved