js 实现弹出层居中，并且层可以拖拽

这是一个用js实现弹出一个层，让层居中，并且可以拖拽喔,代码如下，复制粘贴后，保存成html，就可以直接看到效果喔，虽然界面有点丑，但功能实现了，希望大家一起来改进

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        var x0 = 0, y0 = 0, x1 = 0, y1 = 0;
        var moveable = false;
        function startDrag(obj) {
            if (event.button == 1) {
                //0 没按键 1 按左键 2 按右键 3 按左和右键 4 按中间键 5 按左和中间键 6 按右和中间键 7 按所有的键
                obj.setCapture(); ////设置捕获范围
                var win = obj.parentNode; //得到层的父节点
                x0 = event.clientX;
                y0 = event.clientY;
                x1 = parseInt(win.offsetLeft);
                y1 = parseInt(win.offsetTop);
                moveable = true;
            }
        }
        function drag(obj) {
            if (moveable) {
                var win = obj.parentNode;
                var bodywidth = document.body.clientWidth;
                var bodyheight = document.body.clientHeight;
                var divwidth = win.clientWidth;
                var divheight = win.clientHeight;
                var x, y;

                //控制left边界
                if ((x1 + event.clientX - x0) < 0)//超过左边
                {
                    x = 0;
                }

                else if ((x1 + event.clientX - x0 + divwidth) > bodywidth) {//超过右边
                    x = bodywidth - divwidth;
                }

                else {
                    x = x1 + event.clientX - x0;
                }


                //控制top边界
                if (y1 + event.clientY - y0 < 0) {//超过顶边
                    y = 0;
                }

                else if ((y1 + event.clientY - y0 + divheight) > bodyheight) {//超过底边
                    y = bodyheight - divheight;
                }

                else {
                    y = y1 + event.clientY - y0;
                }
                win.style.left = x;
                win.style.top = y;

            }
        }
        function stopDrag(obj) {
            if (moveable) {
                obj.releaseCapture();
                moveable = false;
            }
        }
        function SetDivLayerAtCenter(objLayerName) {
            objLayer = document.getElementById(objLayerName);
            objLayer.style.top = document.body.clientHeight / 2 - objLayer.style.height.toLowerCase().replace('px', '') / 2;
            objLayer.style.left = document.body.clientWidth / 2 - objLayer.style.width.toLowerCase().replace('px', '') / 2;
        }
        function ShowDiv(objID) {
            SetDivLayerAtCenter(objID);
            document.getElementById(objID).style.display = "";
        }
        function HideDiv(objID) {
            document.getElementById(objID).style.display = "none";
        }
    </script>
</head>
<body>
   <a href="javascript:ShowDiv('SearchLay')"  title="弹出层"> 弹出层</a>
   <div id="SearchLay" style="position: absolute; left: 15px; top: 69px;  225px; height: 225px; z-index: 1; display: none;">
        <iframe style="position:absolute; z-index:-1; top:0; left:0;  100%; height:100%; filter:alpha(opacity=0);"></iframe>
        <div onmousedown="startDrag(this)" onmouseup="stopDrag(this);" onmousemove="drag(this)">
                <table height="10" cellspacing="0" cellpadding="1" width="225" border="0">
                    <tr>
                        <td width="100%" height="1" valign="top" class="SearchbgColor">
                            <table height="21" cellspacing="0" cellpadding="0" width="100%" 
                                border="0">
                                <tr>
                                    <td style=" background-color:Yellow;">
                                        我是弹出层头
                                    </td>
                                    <td align="center" width="50" style=" background-color:Yellow;">
                                        <a href="javascript:HideDiv('SearchLay')">关闭弹出层</a>
                                    </td>
                                </tr>
                            </table>
                            <table bgcolor="blue"  width="225"><tr><td height="20"></td></tr></table>
                            <table cellspacing="0" cellpadding="0" width="225" border="0" bgcolor="blue">
                                <tr>
                                    <td height="100">
                                     我是弹出层喔，亲
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </table>
        </div>
    </div>
</body>
</html>

相关阅读:
Spring 总结
 分布式缓存Memcache
Docker原理 -- namespace与CGroup
JDK源码分析--Collections
React生命周期总结
 【转】前端优化的35条
 http缓存与cdn相关技术
 跨域处理
 sequekize
orm2
原文地址：https://www.cnblogs.com/xianrongbin/p/2791540.html

js 实现 弹出层居中，并且层可以拖拽

js 实现弹出层居中，并且层可以拖拽