<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body, h4 {
margin: 0;
padding: 0;
}
a {
width: 300px;
font-size: 30px;
color: #000;
text-decoration: none;
display: block;
margin: 0 auto;
text-align: center;
}
#dialog {
width: 400px;
height: 220px;
background-color: #fff;
border: 3px solid #ccc;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -110px;
padding: 0 20px 15px 15px;
text-align: center;
display: none;
z-index: 1;
}
#hdTitle {
padding: 10px 0;
cursor: move;
}
#dialog p {
margin: 20px auto;
text-align: right;
}
input {
width: 300px;
height: 30px;
border: 1px solid #ccc;
}
#login {
display: inline-block;
width: 200px;
height: 30px;
line-height: 30px;
font-size: 14px;
border: 1px solid #ccc;
margin: 10px 0;
}
#box_close {
position: absolute;
right: -22px;
top: -22px;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 50%;
background-color: #fff;
font-size: 12px;
cursor: pointer;
}
#bg {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background-color: #000;
opacity: 0.3;
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
display: none;
}
</style>
<script src="js/common.js"></script>
</head>
<body>
<a href="javascript:void(0)" target="_blank" rel="external nofollow" id="link">点击，弹出登录框</a>
<div id="dialog">
<div id="box_close">关闭</div>
<h4 id="hdTitle">登录会员</h4>
<form action="">
<p>用户名：<input type="text" placeholder="请输入用户名"></p>
<p>登录密码： <input type="text" placeholder="请输入登录密码"></p>
<a href="#" target="_blank" rel="external nofollow" id="login">登录会员</a>
</form>
</div>
<!-- 遮罩层 模态窗口 -->
<div id="bg"></div>
<script>
var link = document.getElementById('link');
var dialog = document.getElementById('dialog');
var box_close = document.getElementById('box_close');
var bg = document.getElementById('bg');
var hdTitle = document.getElementById('hdTitle');
link.onclick = function () {
// 遮罩层
bg.style.display = 'block';
dialog.style.display = 'block';
// 取消默认行为
return false;
}
box_close.onclick = function () {
bg.style.display = 'none';
dialog.style.display = 'none';
}
hdTitle.onmousedown = function (e) {
e = e || window.event;
// 鼠标在盒子中的位置
var x = getPage(e).pageX - dialog.offsetLeft; // 盒子的偏移位置
var y = getPage(e).pageY - dialog.offsetTop;
// 拖拽时触发
dialog.onmousemove = function (e) {
e = e || window.event;
// 拖拽时 对话框在页面中的偏移
var dialogX = getPage(e).pageX - x;
var dialogY = getPage(e).pageY - y;
// dialog.style.left = dialogX + 'px';
// dialog.style.top = dialogY + 'px'; // 注意加单位px 此时拖动，鼠标离盒子有一定的距离，是由于margin-top\margin-left造成的
dialog.style.left = dialogX + 200 + 'px';
dialog.style.top = dialogY + 110 + 'px'; // 注意加单位px + 200\+ 110抵消margin-top\margin-left
}
}
document.onmouseup = function () { // 在文档中弹起，而不是在对话框头部hdTitle
dialog.onmousemove = null;
}
</script>
</body>
</html>
原生js实现遮罩层及可拖拽的弹出窗口 
![nodejs微信开发---授权登录+获取用户信息微信网页授权[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)