标签:
在工作过程中经常遇到做弹出的层效果,有的需要在元素右下弹出,有的需要弹出在浏览器正中间,有的需要弹出后再拖拽,有的需要背景要变暗,有的需要弹出的层跟随鼠标移动……
网上此类效果其实很多,有javascript原生的,有基于框架写的,但自己好多时候用不到那么高级的效果,所以就把这些功能都分开来一步一步实现。
其实原理很简单.有两种实现途径:一种是通过元素创建和删除,一种是通过显示和隐藏,其余的具体要做成什么样子,就留给CSS来控制了。下面从最简单的开始(不基于框架)
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>
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>
<!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>
<!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>
<!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>
标签:
原文地址:http://www.cnblogs.com/easirm/p/4206057.html