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

CSS样式表
图片的alt（替换文本）属性描述
CSS布局实例代码 两列布局实例
将PSD网站模板转换为XHTML+CSS
div+css 定位浅析
CSS 浏览器专用
css设置z-index 失效的解决方法
Div+Css实现屏蔽效果
css 鼠标经过文字变色
不用JS只用CSS制作的网页下拉菜单
CSS 类名的长命名和短命名
css ul li 的使用及浏览器兼容问题
div中英文无法自动换行的解决办法
CSS 基础教程 在网页中使用CSS
CSS技巧 使用标签来创建导航菜单(滑动门教程)
用css创建一个类似按扭的导航
css 横向菜单实现代码
使用CSS做出一个嵌套导航.
css 列表菜单的设计
网页中图片应用CSS的滤镜的效果
CSS 漂亮搜索框美化代码

No. « 108 109 110 111 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-03-17   浏览: 259 ::
收藏到网摘: n/a

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

网上此类效果其实很多，有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 全部选择 提示：你可先修改部分代码，再按运行]




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