弹出层详解,从简单到复杂
一、最简单的弹出
<!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: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;} </style> <script 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> </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>弹出层—到浏览器中央:前端思考</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;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;} </style> <script 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> </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>弹出层—到浏览器中央—背景变暗:前端思考</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]退出
<!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]退出—支持鼠标拖动
<!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>
php资料