利用遮罩层的弹出层（2）（可拖曳） 

<!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; width:100%; height:100%; opacity:0.5;filter:alpha(opacity=50); display:none;}
    #showbox{ width: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; cursor:move;}
    #play{ position:absolute; right:5px; top:5px; width:50px;}
    #play a.close{ float:right; width:16px; height:16px; background:url(img/close.png) 0 0 no-repeat;}
    #message{ margin:5px; height:155px; overflow:hidden; line-height:19px;}
-->
</style>
<script>
<!--
    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"}
        var Isclick=false,printX=printY=0;
        title.onmousedown=function(event)
        {
            var prints=event||window.event;
            Isclick=true;
            printX=prints.clientX-box.offsetLeft,printY=prints.clientY-box.offsetTop;
            //区域外捕捉事件
            this.setCapture&&this.setCapture();
        }
        title.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";
            }
            else{return;}
        }
        document.onmouseup=window.onblur=title.onlosecapture=function()
        {
            Isclick=false;
            //区域外捕捉事件
            title.releaseCapture&&title.releaseCapture();
        }
    }
-->
</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"></a></div></span>
    </div>
    <div id="message">
        这是一个弹出层<br />
        如果需要确定按钮可以自由添加（效果带有close的功能然后加上ajax）<br />
        弹出的信息自定义样式自定义<br />
    </div>
</div>
<input type="button" value="it's show button" />
</body>
</html>

这是一个可以拖曳的弹出层，就是（1）的基础上加上了拖曳的功能；没有测试浏览器的兼容性；有什么bug可以反馈；谢谢！

还有就是没有做ie的兼容，ie下没有圆角和阴影；

主要是学习setCapture()releaseCapture()的使用，能使弹出层拖曳的比较完美；

放上demo：

https://files.cnblogs.com/wyflogo/MessageBox.zip

已发现在webkit下的兼容问题，已修改！更新demo地址:

http://cowll.com/demo/MessageBox.html

posted @ 2012-02-27 11:17  Jmarry  阅读(398)  评论(0)  编辑  收藏  举报