<!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=utf-8" /> <title>弹出层</title> <style> <!-- body, div, h2{ margin:0; padding:0;} html, body{ overflow:hidden; height:100%; font-size:12px; font-family:Arial, Helvetica, sans-serif; color:#333;} #mask{ background:#000; position:absolute; top:0; left:0; 100%; height:100%; opacity:0.5;filter:alpha(opacity=50); display:none;} #showbox{ 400px; height:200px; position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px; z-index:1; background:#fff; border-radius:5px; box-shadow: 0 1px 3px 2px #666; display:none;} #title{ margin:5px; position:relative; height:27px; border-bottom:1px solid #333; line-height:28px;} #play{ position:absolute; right:5px; top:5px; 50px;} #play a.close{ float:right; 16px; height:16px; background:url(img/close.png) 0 0 no-repeat;} #message{ margin:5px; height:155px; overflow:hidden; line-height:19px;} --> </style> <script> <!-- function drag(element,box) { var Isclick=false,printX=printY=0; element.style.cursor = "move"; element.onmousedown=function(event) { var prints=event||window.event; Isclick=true; printX=prints.clientX-box.offsetLeft,printY=prints.clientY-box.offsetTop; document.onmousemove=function(event) { //我们要拖曳就是要改变它的top和left的值，但又不能超出浏览器的界面 if(Isclick) { var mouse=event||window.event; var boxX=mouse.clientX-printX; var boxY=mouse.clientY-printY; var form=document.body||document.documentElement; var maxX=form.clientWidth-box.offsetWidth; var maxY=form.clientHeight-box.offsetHeight; //判断是否超出浏览器 boxX=boxX<=0?0:boxX; boxX=boxX>=maxX?maxX:boxX; boxY=boxY<=0?0:boxY; boxY=boxY>=maxY?maxY:boxY; box.style.margin=0; box.style.left=boxX+"px"; box.style.top=boxY+"px"; return false; } else{return false;} }; document.onmouseup=window.onblur=this.onlosecapture=function() { Isclick=false; //区域外捕捉事件 this.releaseCapture && this.releaseCapture(); }; //区域外捕捉事件 this.setCapture && this.setCapture(); return false; } } window.onload=function() { var input=document.getElementsByTagName("input")[0]; var mask=document.getElementById("mask"); var box=document.getElementById("showbox"); var play=document.getElementById("play"); var title=document.getElementById("title"); var closing=play.getElementsByTagName("a")[0]; input.onclick=function(){mask.style.display="block";box.style.display="block"} closing.onclick=function(){mask.style.display="none";box.style.display="none"} drag(title,box); } --> </script> </head> <body> <div id="mask"></div> <div id=showbox> <div id="title"> <h2 title="弹出层">弹出层</h2> <!--预留空位放缩小放大按钮--> <div id="play"><a class="close" href="javascript:;" title="close">X</a></div></span> </div> <div id="message"> 这是一个弹出层<br /> 如果需要确定按钮可以自由添加（效果带有close的功能然后加上ajax）<br /> 弹出的信息自定义样式自定义<br /> </div> </div> <input type="button" value="it's show button" /> </body> </html>
转载自：http://www.cnblogs.com/wyflogo/archive/2012/02/27/2369539.html