网页制作教程:弹出层详解- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页制作教程:弹出层详解

CSS样式表: CSS3教程(10):CSS3 HSL声明设置颜色; CSS3教程:新增加的结构伪类; 网页布局绝对定位(position)轻松简单; 掌握盒模型轻松DIV CSS网页布局; 实例方式学CSS text-align怎么用; 网页重构时在IE6中遇到png兼容性; CSS3教程:边框属性border的极致应用; CSS网页布局使用表格可以吗？; 最新版本的CSS选择器浏览器支持情况; 有序列表和段落设计华丽的网页列表数字; CSS教程:通过实例学习和理解CSS盒模型; CSS网页布局的核心内容:CSS盒模型; CSS3伪类选择器：nth-child(); CSS教程：inline-block在各浏览器的显示; CSS实现网页分栏布局的方法：绝对定位和浮动; CSS实例：用CSS制作网页像素画; CSS教程：三列固定网页布局实例; 无hack无js全兼容text-overflow-ellipsis效果; CSS解决方案：IE6中遇到png兼容性; CSS学习之类目之间竖线的练习实例

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

CSS样式表中的网页制作教程:弹出层详解

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-03-17 浏览: 286 ::

收藏到网摘: n/a

15个滑动门效果CSS网页导航菜单设计教程 SEO实战:网页排名效果最好的标题写法

在工作过程中经常遇到做弹出的层效果，有的需要在元素右下弹出，有的需要弹出在浏览器正中间，有的需要弹出后再拖拽，有的需要背景要变暗，有的需要弹出的层跟随鼠标移动……

网上此类效果其实很多，有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);	}
}

点击下面“运行”直接查看效果

二、弹出层—到浏览器中央

用到的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);	}
}

点击下面“运行”直接查看效果

三、弹出层—到浏览器中央—背景变暗

用到的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;
}

点击下面“运行”直接查看效果

四、弹出层—到浏览器中央—背景变暗—支持键盘[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();	}
}

点击下面“运行”直接查看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="前端思考" /> <meta name="keywords" content="前端思考" /> <title>弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出：前端思考</title> <style> *{margin:0;padding:0px;} body{padding:30px;} #show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;} #show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;} #show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;} #show p{padding:5px;} #text{font-size:12px;text-indent:2em;line-height:20px;} #bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10} </style> <script type="text/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); 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; function getEvent() { return window.event || arguments.callee.caller.arguments[0]; } document.onkeyup = function(){ var event = getEvent(); if (event.keyCode == 27){ oClose(); } } } </script> </head> <body> <a onclick="show(); return false" href="#">请猛击我（弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出）</a> <div id="show"> <h3>弹出层标题栏</h3> <p id="text"> 这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。 </p> </div> </body> </html>
[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;	}	};
}

点击下面“运行”直接查看效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <meta name="description" content="前端思考" /> <meta name="keywords" content="前端思考" /> <title>五、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动：前端思考</title> <style> *{margin:0;padding:0px;} body{padding:30px;} #show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;z-index:11;zoom:1;} #show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;cursor:move} #show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;} #show p{padding:5px;} #text{font-size:12px;text-indent:2em;line-height:20px;} #bgbox{position:absolute;left:0;top:0;background:#000;filter:alpha(opacity=30);opacity:0.3;z-index:10} </style> <script type="text/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); 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'; document.body.removeChild(bgObj); oShow.removeChild(oClosebtn); } oClosebtn.onclick = oClose; bgObj.onclick = oClose; function getEvent() { return window.event || arguments.callee.caller.arguments[0]; } document.onkeyup = function(){ var event = getEvent(); if (event.keyCode == 27){ oClose(); } } 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; } }; } } </script> </head> <body> <a onclick="show(); return false" href="#">请猛击我（弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动）</a> <div id="show"> <h3 id="titlebar">弹出层标题栏</h3> <p id="text"> 这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。 </p> </div> </body> </html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

欢迎大家多提改进意见或建议，共同学习和探讨

15个滑动门效果CSS网页导航菜单设计教程 SEO实战:网页排名效果最好的标题写法

CSS样式表 中的 网页制作教程:弹出层详解

一、最简单的弹出

用到的javascript代码如下：

点击下面“运行”直接查看效果

二、弹出层—到浏览器中央

用到的javascript代码如下：

点击下面“运行”直接查看效果

三、弹出层—到浏览器中央—背景变暗

用到的javascript代码如下：

点击下面“运行”直接查看效果

四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出

键盘事件的javascript代码如下：

点击下面“运行”直接查看效果

四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动

鼠标拖动的javascript代码如下：

点击下面“运行”直接查看效果

评论 (0) All

CSS样式表中的网页制作教程:弹出层详解