Js可移动对话框

效果演示地址:http://xiaolidan00.top/movableDialog.html

###界面布局

<div class="modal_bg">
			<div class="modal_box" style="width: 400px;height: 300px;top: 40%;left: 40%;">
				<div class="modal_header">对话框<span class="modal_close">X</span></div>
				<div class="modal_body">
					<div style="line-height: 100px;text-align: center;">这是一个对话框</div>
				</div>
				<div class="modal_footer">
					<button>确定</button>
					<button>取消</button>
				</div>
			</div>
		</div>

.modal_bg {
				position: fixed;
				z-index: 99;
				height: 100%;
				width: 100%;
			}
			
			.modal_bg>.modal_box {
				background: white;
				border-radius: 4px;
				position: fixed;
				box-shadow: 0 0 3px #AAAAAA;
			}
			
			.modal_bg>.modal_box>.modal_header {
				cursor: move;
				border-radius: 4px 4px 0 0;
				background: radial-gradient(circle, #00BFFF, #1E90FF);
				height: 40px;
				line-height: 40px;
				padding: 0 16px;
				font-size: 18px;
				color: white;
			}
			
			.modal_bg>.modal_box>.modal_header>span.modal_close {
				color: white;
				font-size: 18px;
				float: right;
				display: inline-block;
				cursor: pointer;
			}
			
			.modal_bg>.modal_box>.modal_body {
				height: calc(100% - 100px);
			}
			
			.modal_bg>.modal_box>.modal_footer {
				height: 60px;
				line-height: 60px;
				text-align: center;
			}
			
			.modal_bg>.modal_box>.modal_footer>button {
				border: none;
				background: #1E90FF;
				color: white;
				width: 80px;
				height: 30px;
				line-height: 30px;
				border-radius: 4px;
			}
			
			.modal_bg>.modal_box>.modal_footer>button:hover {
				background: #00BFFF;
			}

JS

//移动对话框
			var x = 0;
			var m1 = function(e) {
					var left = parseInt($('.modal_bg>.modal_box').css('left').replace('px', '')) + (e.pageX - x) + 'px';
					$('.modal_bg>.modal_box').css('left', left);

					$('.modal_bg>.modal_box').css('top', e.pageY - 20 + 'px');
					x = e.pageX;
				},
				m2 = function(e) {
					x = e.pageX;
				};

			$('.modal_bg>.modal_box>.modal_header').on({
				'mousedown': function(e) {

					$('.modal_bg').on({
						'mousedown': m2,
						'mousemove': m1
					})
				},
				'mouseup': function() {
					$('.modal_bg').off({
						'mousedown': m2,
						'mousemove': m1
					})
				}
			});
			$('.modal_bg>.modal_box>.modal_header>.modal_close').click(function(){
				$('.modal_bg').hide();
			});