隐藏窗口点击弹出事件 与 拖动事件
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;
}