当前位置 > 首页 > 个人随笔 > 弹出层详解，从简单到复杂

弹出层详解，从简单到复杂

2009年12月25日   作者：     类别：个人随笔

11,860 views | 10 条评论

分享到: 百度 QQ空间 微博 豆瓣 人人 开心 QQ书签

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

网上此类效果其实很多，有javascript原生的，有基于框架写的,但自己好多时候用不到那么高级的效果，所以就把这些功能都分开来一步一步实现。

其实原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。下面从最简单的开始（不基于框架）

一、最简单的弹出

用到的javascript代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11

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代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11

function getEvent(){
	return window.event || arguments.callee.caller.arguments[0];
	// 获得事件Event对象，用于兼容IE和FireFox
}
 
document.onkeyup = function(){
	var event = getEvent();
	if (event.keyCode == 27){
		oClose();
	}
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

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

鼠标拖动的javascript代码如下：
Download script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

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;
		} 
	};
}
点击下面“运行”直接查看效果

提示：你可以先修改部分代码再运行。

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

相关博文

标签：,

相关日志

Comments

10 条评论 关于“弹出层详解，从简单到复杂”
  1. 照照 说道：
    2010/02/05 5:45 上午

    效果不错，我收藏了，有好的效果快点儿发布哦～～·

  2. xiaotian_s 说道：
    2010/02/08 4:16 上午

    好东西！讲得很详细，很适合进来学习的！

  3. sunrain 说道：
    2010/02/08 7:52 上午

    http://www.cnblogs.com/cloudgamer/archive/2008/09/15/1290954.html
    这个弹出层效果也不错

  4. jacy 说道：
    2010/02/10 2:51 上午

    很不错，适合学习
    为了不要每次点击都添加一个节点
    稍微改一下
    oClose.onclick = function(){
    oShow.style.display = ‘none’;
    oShow.removeChild(this);
    }

  5. admin 说道：
    2010/02/10 8:15 上午

    嗯，对，我开始没考虑到，多谢提醒！

  6. xmory 说道：
    2010/03/19 8:30 上午

    无意间来到这个博客，觉得很不错，学到很多东西~
    发现一个小问题：www.artskin.cn的分类中”flash”拼错了，呵呵

  7. admin 说道：
    2010/03/23 6:50 上午

    啊，一直没注意，非常感谢！

  8. George 说道：
    2010/04/05 8:05 上午

    重用性？？ 所以我觉得代码有待于改善

  9. siqiniao 说道：
    2011/07/02 1:26 上午

    弹出层后怎么锁定背景呢呢？？？

Trackbacks

看看别人怎么评价本文...
  1. 添加用于网站导航的弹出层洪宝书 | 洪宝书 说道：
    2010/07/15 2:21 下午

    [...] http://www.artcss.com/?p=477 从最简单的弹出层到足够复杂的弹出层，代码简洁，模块块化程度高，我的弹出层主要基于此做出。 [...]



给作者留言：