隐藏窗口弹出及拖动效果

隐藏窗口点击弹出事件与拖动事件

css设置display：none；绑定点击事件修改display属性值即可，关闭同理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #move {
            display: none;
            width:300px;
            height:300px;
            background-color:gray;
            position: absolute;
            left: 100px;
            top:100px;
        }
        .show{
            width: 50px;
            height: 30px;
            border-radius: 3px;
            font-weight: bold;
        }
        .exit{
            position: absolute;
            bottom: 20px;
            right: 50px;
        }
    </style>
</head>
<body>
    <button type="button" id="show" class="show"> 显示</button>
    <div id="move">
        <button type="button" id="exit" class="exit">关闭</button>
    </div>

<script>
        var show = document.getElementById("show");
        show.onclick = function() {
            var movewindow = document.getElementById("move");
            movewindow.style.display="block";
        }
        var exit = document.getElementById("exit");
        exit.onclick = function() {
            var movewindow = document.getElementById("move");
            movewindow.style.display="none";
        }
        </script>
</body>
</html>

拖动事件比较经典，网上例子很多博采众长总结了一款超级简单好理解的，

过程中遇到一个坑（将初始高度取为top），以后取变量名一定要注意别和默认全局变量重了！不然一顿好找Bug！

//拖动
        var dragNode = document.getElementById("move");
        var Left=0;
        var Top=0;

        var x0=0;
        var y0=0;
        var mousedown=false;
        dragNode.onmousedown = function(event) {
            var e = event || window.event;
            x0 = e.clientX; 
            y0 = e.clientY;  

            Left=dragNode.offsetLeft;
            Top=dragNode.offsetTop;
            
            mousedown=true;
        };

        document.onmousemove = function (event) {
            var e = event|| window.event;   
            var x = e.clientX; 
            var y = e.clientY; 

            if(mousedown){
                dragNode.style.left = Left+ (x-x0)+'px'; 
                dragNode.style.top = Top +(y-y0)+ 'px'; ;    
            }
        };

        dragNode.onmouseup = function (event) {
            mousedown=false;
        }