Jvascript 弹出层

<!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