首页 > 代码库 > 弹出层详解，从简单到复杂
弹出层详解，从简单到复杂
在工作过程中经常遇到做弹出的层效果，有的需要在元素右下弹出，有的需要弹出在浏览器正中间，有的需要弹出后再拖拽，有的需要背景要变暗，有的需要弹出的层跟随鼠标移动……
网上此类效果其实很多，有javascript原生的，有基于框架写的,但自己好多时候用不到那么高级的效果，所以就把这些功能都分开来一步一步实现。
其实原理很简单.有两种实现途径:一种是通过元素创建和删除，一种是通过显示和隐藏，其余的具体要做成什么样子，就留给CSS来控制了。下面从最简单的开始（不基于框架）
一、最简单的弹出
用到的javascript代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <meta name="description" content="前端思考" /> 6 <meta name="keywords" content="前端思考" /> 7 <title>最简单的弹出层：前端思考</title> 8 <style> 9 *{margin:0;padding:0px;}10 body{padding:30px;}11 #show{width:300px;height:200px;display:none;padding:1px;position:relative;border:1px solid #4c77aa;background:#f2f7fd;margin-left:70px;zoom:1;}12 #show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}13 #show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}14 #show p{padding:5px;}15 #text{font-size:12px;text-indent:2em;line-height:20px;}16 </style>17 <script type="text/javascript">18 function show(){19 var oShow = document.getElementById(‘show‘);20 oShow.style.display = ‘block‘;21 var oClose = document.createElement("span");22 oClose.innerHTML = "×";23 oShow.appendChild(oClose);24 oClose.onclick = function(){25 oShow.style.display = ‘none‘;26 oShow.removeChild(this);27 }28 }29 </script>30 </head>31 <body>32 <a onclick="show(); return false" href="#">请猛击我</a>33 <div id="show">34 <h3>弹出层标题栏</h3>35 <p id="text">36 这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。37 </p>38 </div>39 </body>40 </html>
二、弹出层—到浏览器中央
用到的javascript代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 5 <meta name="description" content="前端思考" /> 6 <meta name="keywords" content="前端思考" /> 7 <title>弹出层—到浏览器中央：前端思考</title> 8 <style> 9 *{margin:0;padding:0px;}10 body{padding:30px;}11 #show{width:300px;height:200px;display:none;padding:1px;position:absolute;border:1px solid #4c77aa;background:#f2f7fd;zoom:1;}12 #show h3{background:#4c77aa;color:#fff;font-size:14px;padding:5px;}13 #show span{position:absolute;right:3px;top:3px;display:block;cursor:pointer;color:#fff;font-weight:bold;}14 #show p{padding:5px;}15 #text{font-size:12px;text-indent:2em;line-height:20px;}16 </style>17 <script type="text/javascript">18 function show(){19 var iWidth = document.documentElement.clientWidth;20 var iHeight = document.documentElement.clientHeight;21 var oShow = document.getElementById(‘show‘);22 oShow.style.display = ‘block‘;23 oShow.style.left = (iWidth-302)/2+"px";24 oShow.style.top = (iHeight-202)/2+"px";25 var oClose = document.createElement("span");26 oClose.innerHTML = "×";27 oShow.appendChild(oClose);28 oClose.onclick = function(){29 oShow.style.display = ‘none‘;30 oShow.removeChild(this);31 }32 }33 </script>34 </head>35 <body>36 <a onclick="show(); return false" href="#">请猛击我（我会弹到中间）</a>37 <div id="show">38 <h3>弹出层标题栏</h3>39 <p id="text">40 这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。41 </p>42 </div>43 </body>44 </html>
三、弹出层—到浏览器中央—背景变暗
用到的javascript代码如下：
<!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>弹出层—到浏览器中央—背景变暗：前端思考</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"; 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></head><body><a onclick="show(); return false" href="#">请猛击我（我会弹到中间，同时背景变暗）</a><div id="show"> <h3>弹出层标题栏</h3> <p id="text"> 这里是弹出层内容，内容可以是文字、图片等，可以是iframe传进来，也可以用jQuery的load()传进来。如有什么不合理的或可以改进的，大家可以给我留言，共同学习。 </p></div></body></html>
四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出
键盘事件的javascript代码如下：
<!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>
四、弹出层—到浏览器中央—背景变暗—支持键盘[Esc]退出—支持鼠标拖动
鼠标拖动的javascript代码如下：
<!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>
弹出层详解，从简单到复杂
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。