网页制作教程:弹出层详解

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

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

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

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);}}

!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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /meta name="description" content="前端思考" /meta name="keywords" content="前端思考" /title最简单的弹出层：前端思考/titlestyle*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:relative;border:1px solid #4c77aa;background:#f2f7fd;margin-left:70px;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;}/stylescript type="text/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);}}/script/headbodya onclick="show(); return false" href="#"请猛击我/adiv id="show"h3弹出层标题栏/h3p id="text"这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。/p/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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);}}

!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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /meta name="description" content="前端思考" /meta name="keywords" content="前端思考" /title弹出层到浏览器中央：前端思考/titlestyle*{margin:0;padding:0px;}body{padding:30px;}#show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;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;}/stylescript type="text/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);}}/script/headbodya onclick="show(); return false" href="#"请猛击我（我会弹到中间）/adiv id="show"h3弹出层标题栏/h3p id="text"这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。/p/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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;}

!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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /meta name="description" content="前端思考" /meta name="keywords" content="前端思考" /title弹出层到浏览器中央背景变暗：前端思考/titlestyle*{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}/stylescript 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";function oClose(){oShow.style.display = 'none';document.body.removeChild(bgObj);}var oClosebtn = document.createElement("span");oClosebtn.innerHTML = "×";oShow.appendChild(oClosebtn);oClosebtn.onclick = oClose;bgObj.onclick = oClose;}/script/headbodya onclick="show(); return false" href="#"请猛击我（我会弹到中间，同时背景变暗）/adiv id="show"h3弹出层标题栏/h3p id="text"这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。/p/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /meta name="description" content="前端思考" /meta name="keywords" content="前端思考" /title弹出层到浏览器中央背景变暗支持键盘[Esc]退出 ：前端思考/titlestyle*{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}/stylescript 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/headbodya onclick="show(); return false" href="#"请猛击我（弹出层到浏览器中央背景变暗支持键盘[Esc]退出）/adiv id="show"h3弹出层标题栏/h3p id="text"这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。/p/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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"headmeta http-equiv="Content-Type" content="text/html; charset=gb2312" /meta name="description" content="前端思考" /meta name="keywords" content="前端思考" /title五、弹出层到浏览器中央背景变暗支持键盘[Esc]退出支持鼠标拖动 ：前端思考/titlestyle*{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}/stylescript 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/headbodya onclick="show(); return false" href="#"请猛击我（弹出层到浏览器中央背景变暗支持键盘[Esc]退出支持鼠标拖动）/adiv id="show"h3 id="titlebar"弹出层标题栏/h3p id="text"这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。/p/div/body/html
[Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]

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