SOURCE

window.onload = function() {
			var oBtn = document.querySelector('#btn');
			//alert(oBtn)
			//获取可视区的宽和高
			var oWidth = document.documentElement.clientWidth;
			var oHeight = document.documentElement.clientHeight;
			//创建背景蒙版节点
			var oBj = document.createElement('div');
			oBj.id = 'bj';
			oBj.style.width = oWidth + 'px';
			oBj.style.height = oHeight + 'px';
			document.body.appendChild(oBj);
			//创建弹出层节点
			var oBox = document.createElement('div');
			oBox.id = 'box';
			oBox.innerHTML = "<div class='content'><div id='close'>关闭<div></div>"
			document.body.appendChild(oBox);
			//使弹出层居中显示
			var oW = oBox.offsetWidth;
			var oH = oBox.offsetHeight;
			oBox.style.left = oWidth / 2 - 200 + 'px';
			oBox.style.top = oHeight / 2 - 100 + 'px';
			//点击按钮，弹出层出现
			oBtn.onclick = function() {
				oBj.style.display = 'block';
				oBox.style.display = 'block'
			}
			//点击关闭按钮
			var oC = document.querySelector('#close');
			oC.onclick = function() {
				//document.body.removeChild(oBj);
				//document.body.removeChild(oBox);
				oBj.style.display = 'none';
				oBox.style.display = 'none'
			}
			//移动弹出层
			var move = false;
			var _x, _y; //鼠标相对弹框的位置
			var x, y; //弹框相对页面的位置
			oBox.onmousedown = function(ev) {
				
				var e = ev || event;
				_x = e.pageX - parseInt(oBox.style.left);
				_y = e.pageY - parseInt(oBox.style.top);
				//alert(_x+','+_y)
			};
			oBox.onmousemove = function(ev) {
					// move = true;
					var e = ev || event;
					if(move) {
						x = e.pageX - _x;
						y = e.pageY - _y;
						alert(x+','+y)
						if(x < 0) x = 0;
						if(y < 0) y = 0;
						if(x > oWidth - oW) x = oWidth - oW;
						if(y > oHeight - oH) y = oHeight - oH;
						oBox.style.left = x + 'px';
						oBox.style.top = y + 'px';
					}
				}
			//松开鼠标
			oBox.onmouseup = function(){
				move = false;
			}
			oBox.onmouseout = function(){
				move = false;
			}

		}

<button id="btn">点击我出现弹出窗口</button>

* {
			margin: 0;
			padding: 0;
		}
		
		#btn {
			margin: 0 auto;
			margin-top: 100px;
			display: block;
			border: none;
			outline: none;
			background: #1FB6DB;
			color: #FFFFFF;
			font-size: 20px;
			border-radius: 2px;
			padding: 3px;
			box-shadow: 0 0px 10px #0099FF;
			cursor: pointer;
		}
		
		#bj {
			background: #000000;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0.5;
			filter: alpha(opacity=50);
			z-index: 1000px;
			display: none;
			transition: all 1s ease;
		}
		
		#box {
			/*position: fixed;*/
			position: absolute;
			z-index: 1002;
			display: none;
			box-shadow: 0px 0px 20px #E1E2E3;
		}
		
		.content {
			width: 400px;
			height: 200px;
			margin: 0 auto;
			background: #FFFFFF;
			position: relative;
			cursor: move;
			border-radius: 5px;
		}
		
		#close {
			width: 50px;
			height: 30px;
			background: #0000FF;
			position: absolute;
			top: 10px;
			right: 10px;
			cursor: pointer;
			text-align: center;
			line-height: 30px;
			color: #FFFFFF;
		}