<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dialog</title>
<meta name="description" content="">
<meta name="keywords" content="">
</head>
<body>
</body>
</html>
<script type="text/javascript">
var linkStyle = document.createElement("link");
linkStyle.setAttribute("rel", "stylesheet");
linkStyle.setAttribute("href", "dialog.css");
document.getElementsByTagName("head")[0].appendChild(linkStyle);
var dialogWindowEle = document.createElement("div");
var dialogHeaderEle = document.createElement("div");
var dialogOperateEle = document.createElement("div");
var dialogCloseEle = document.createElement("span");
var dialogTitleEle = document.createElement("div");
var dialogBodyerEle = document.createElement("div");
var dialogFooterEle = document.createElement("div");
var dialogOkEle = document.createElement("span");
var dialogResetEle = document.createElement("span");
var dialogCancelEle = document.createElement("span");
var dialogRightLineEle = document.createElement("div");
var dialogBottomLineEle = document.createElement("div");
var dialogCornerEle = document.createElement("div");
var titleText = document.createTextNode("标题");
var okText = document.createTextNode("提交");
var resetText = document.createTextNode("重置");
var cancelText = document.createTextNode("取消");
dialogWindowEle.setAttribute("id", "Window_Dialog");
dialogHeaderEle.setAttribute("id", "Dialog_Header");
dialogOperateEle.setAttribute("id", "Dialog_Operate");
dialogCloseEle.setAttribute("id", "Dialog_Close");
dialogTitleEle.setAttribute("id", "Dialog_Title");
dialogBodyerEle.setAttribute("id", "Dialog_Bodyer");
dialogFooterEle.setAttribute("id", "Dialog_Footer");
dialogOkEle.setAttribute("id", "Dialog_Ok");
dialogResetEle.setAttribute("id", "Dialog_Reset");
dialogCancelEle.setAttribute("id", "Dialog_Cancel");
dialogRightLineEle.setAttribute("id", "Dialog_Right_Line");
dialogBottomLineEle.setAttribute("id", "Dialog_Bottom_Line");
dialogCornerEle.setAttribute("id", "Dialog_Corner");
dialogOkEle.setAttribute("class", "dialogBtn");
dialogResetEle.setAttribute("class", "dialogBtn");
dialogCancelEle.setAttribute("class", "dialogBtn");
dialogOperateEle.appendChild(dialogCloseEle);
dialogTitleEle.appendChild(titleText);
dialogHeaderEle.appendChild(dialogTitleEle);
dialogHeaderEle.appendChild(dialogOperateEle);
dialogOkEle.appendChild(okText);
dialogResetEle.appendChild(resetText);
dialogCancelEle.appendChild(cancelText);
dialogFooterEle.appendChild(dialogCancelEle);
dialogFooterEle.appendChild(dialogResetEle);
dialogFooterEle.appendChild(dialogOkEle);
dialogWindowEle.appendChild(dialogHeaderEle);
dialogWindowEle.appendChild(dialogBodyerEle);
dialogWindowEle.appendChild(dialogFooterEle);
dialogWindowEle.appendChild(dialogRightLineEle);
dialogWindowEle.appendChild(dialogBottomLineEle);
dialogWindowEle.appendChild(dialogCornerEle);
document.body.appendChild(dialogWindowEle);
var _clientWidth = document.documentElement.clientWidth;
var _clientHeight = document.documentElement.clientHeight;
var _Dialog = document.getElementById("Window_Dialog");
var _dialog_title = document.getElementById("Dialog_Title");
var _right_line = document.getElementById("Dialog_Right_Line");
var _bottom_line = document.getElementById("Dialog_Bottom_Line");
var _corner_line = document.getElementById("Dialog_Corner");
var _dialog_close = document.getElementById("Dialog_Close");
var _dialog_cancel= document.getElementById("Dialog_Cancel");
_dialog_title.onmousedown = function(e){
var x1 = e.pageX, y1 = e.pageY, l1 = _Dialog.offsetLeft, t1 = _Dialog.offsetTop;
document.onmousemove = function(e){
document.body.style.cursor = "move";
_Dialog.style.transition = "all 0.0s ease";
_Dialog.style.MozTransition = "all 0.0s ease";
_Dialog.style.WebkitTransition = "all 0.0s ease";
var x2 = e.pageX, y2 = e.pageY, l2 = x2 - x1 + l1, t2 = y2 - y1 + t1;
if(l2 <= 0){
l2 = 0;
}else if(l2 > _clientWidth - _Dialog.offsetWidth){
l2 = _clientWidth - _Dialog.offsetWidth;
}
if(t2 <= 0){
t2 = 0;
}else if(t2 > _clientHeight - _Dialog.offsetHeight ){
t2 = _clientHeight - _Dialog.offsetHeight;
}
_Dialog.style.left = l2 + 'px';
_Dialog.style.top = t2 + 'px';
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
document.body.style.cursor = "default";
};
}
_right_line.onmousedown = function(e){
DialogResize(e, this, "r");
}
_bottom_line.onmousedown = function(e){
DialogResize(e, this, "b");
}
_corner_line.onmousedown = function(e){
DialogResize(e, this, "");
}
_dialog_close.onmouseup = _dialog_cancel.onmouseup = function(e){
document.body.removeChild(_Dialog);
}
function DialogResize(e, obj, type){
var ex = e.pageX, ey = e.pageY, _this = obj, _oleft = _this.offsetLeft, _otop = _this.offsetTop;
document.onmousemove = function(e){
var ox = e.pageX, oy = e.pageY, _width = ox - ex + _oleft, _height = oy - ey + _otop;
_Dialog.style.transition = "all 0.0s ease";
_Dialog.style.MozTransition = "all 0.0s ease";
_Dialog.style.WebkitTransition = "all 0.0s ease";
if(_width < 196){
_width = 196;
}else if(_width > _clientWidth - _Dialog.offsetLeft){
_width = _clientWidth - _Dialog.offsetLeft;
}
if(_height < 196){
_height = 196;
}else if(_height > _clientHeight - _Dialog.offsetTop){
_height = _clientHeight - _Dialog.offsetTop;
}
if(type == 'r'){
//_this.style.left = _width +'px';
document.body.style.cursor = "e-resize";
_Dialog.style.width = _width + 4 +'px';
}else if(type == 'b'){
//_this.style.top = _height +'px';
document.body.style.cursor = "s-resize";
_Dialog.style.height = _height + 4 +'px';
}else{
//_this.style.left = _width +'px';
//_this.style.top = _height +'px';
document.body.style.cursor = "se-resize";
_Dialog.style.height = _height + 4 +'px';
_Dialog.style.width = _width + 4 +'px';
}
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
document.body.style.cursor = "default";
if(type == 'r'){
//_this.style.left = "";
//_this.style.right = "0";
}else if(type == 'b'){
//_this.style.top = "";
//_this.style.bottom = "0";
}else{
//_this.style.left = "";
//_this.style.right = "0";
//_this.style.top = "";
//_this.style.bottom = "0";
}
};
}
</script>
#Window_Dialog{position:absolute;min-width:200px;min-height:200px;border:1px solid #437596;background-color:#5e91b2;border-radius:3px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;z-index:90001}
#Dialog_Header{height:30px;border-radius:3px 3px 0 0;white-space:nowrap;cursor:default;background-color:#83B8DA;background-image:-webkit-linear-gradient(top, #83B8DA 0%, #6498B9 100%);background-image:-moz-linear-gradient(top, #83B8DA 0%, #6498B9 100%);background-image:-o-linear-gradient(top, #83B8DA 0%, #6498B9 100%);background-image:-ms-linear-gradient(top, #83B8DA 0%, #6498B9 100%);background-image:linear-gradient(top, #83B8DA 0%, #6498B9 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#83B8DA, endColorstr=#6498B9);box-shadow:inset 0 1px 0 #C2DCED;-webkit-box-shadow:inset 0 1px 0 #C2DCED;-moz-box-shadow:inset 0 1px 0 #C2DCED;-o-box-shadow:inset 0 1px 0 #C2DCED;}
#Dialog_Bodyer{position:absolute;top:30px;right:0;bottom:36px;left:0;margin:0 4px;background-color:#F6F8F9;border:1px solid #5082A3;}
#Dialog_Footer{position:absolute;right:0;bottom:0;left:0;height:31px;margin:0 4px 4px;border-radius:0 0 3px 3px;border:1px solid #5082A3;text-align:right;border-top:1px solid #C7D6E2;background-color:#E4EAEE;background-image:-webkit-linear-gradient(top, #F4F7F9 0%, #E4EAEE 100%);background-image:-moz-linear-gradient(top, #F4F7F9 0%, #E4EAEE 100%);background-image:-o-linear-gradient(top, #F4F7F9 0%, #E4EAEE 100%);background-image:-ms-linear-gradient(top, #F4F7F9 0%, #E4EAEE 100%);background-image:linear-gradient(top, #F4F7F9 0%, #E4EAEE 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#F4F7F9, endColorstr=#E4EAEE);box-shadow:inset 0 1px 0 #FFFFFF;-webkit-box-shadow:inset 0 1px 0 #FFFFFF;-moz-box-shadow:inset 0 1px 0 #FFFFFF;-o-box-shadow:inset 0 1px 0 #FFFFFF;}
#Dialog_Right_Line{position:absolute;right:0;top:0;width:4px;height:100%;background:none;border-radius:0 3px 3px 0;cursor:e-resize;}
#Dialog_Bottom_Line{position:absolute;right:0;bottom:0;width:100%;height:4px;background:none;border-radius:0 0 3px 3px;cursor:s-resize;}
#Dialog_Corner{position:absolute;right:0;bottom:0;width:4px;height:4px;background:none;border-radius:0 0 3px 0;cursor:se-resize;z-index:10;}
#Dialog_Title{height:30px;line-height:30px;padding-left:8px;font-size:13px;color:#FFFFFF;font-weight:bold;cursor:move;}
#Dialog_Operate{position:absolute;top:0;right:0;width:40px;height:30px;z-index:11px;}
#Dialog_Min{}
#Dialog_Max{}
#Dialog_Close{float:right;width:28px;height:20px;margin:-1px 12px 0 0;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAIAAAARPMquAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkIwMDNCQ0I3OERDNjExRTQ4NDBGREE3MzQ5Q0MzRjg2IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkIwMDNCQ0I4OERDNjExRTQ4NDBGREE3MzQ5Q0MzRjg2Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QjAwM0JDQjU4REM2MTFFNDg0MEZEQTczNDlDQzNGODYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QjAwM0JDQjY4REM2MTFFNDg0MEZEQTczNDlDQzNGODYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4y5jCDAAABoElEQVR42qyUzU7CQBDHlX6bSAuURBBewoOJZ28+gzePnD0bHwJv3nwG38AYTfQlQC5akAiIsTvrv2xbN+w2HOhmmkxmZ36Zj86ap5c3O2UfE99V77xE4nX/LoGOpj/TJSuF6LtGmikRZ0SlQIkqGZQTKdDBYPj+EUFpho1ut7PRnkI5pVC2OmvXiLztnUG56N8T553DNvTh2yiKxrm93W6tRTG2K5XPCssHAvGcc+jj8UQQMwQp5SduSQtixlQJggCsnAucTMQVHLSBefkUK+WHzRDZIViA5ARh9H0fDmoUY0aaKSOmPfVGvVqt5vnmRBhxpY+hPNOY4pgV/CKkNRb5A/WfqbY7URTNZjO5cNEHGHGlDRGZFg7qczJZzOfyZOS54QoORYOqiHLU5nwvFjLR8TyIzIWDpqWUlY8GqSJPxnYcx/UgUOS5FQWKNdXsvmWn8VAs1xMOULAEuV2NotWOFK6pYduQ7O9jG+2yRawp7dnG1/J3yydq37VET82gVnt4ejk5PnItY/unDygAzYNW8tI8Pr+W8p6CCOCfAAMA2hn2ugFNir8AAAAASUVORK5CYII=") left top no-repeat;}
#Dialog_Min:hover{}
#Dialog_Max:hover{}
#Dialog_Close:hover{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAUCAIAAAARPMquAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkE5Q0MzNTZBOERDNjExRTRCRkFBQjA2MDFGMzJBODM1IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkE5Q0MzNTZCOERDNjExRTRCRkFBQjA2MDFGMzJBODM1Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTlDQzM1Njg4REM2MTFFNEJGQUFCMDYwMUYzMkE4MzUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTlDQzM1Njk4REM2MTFFNEJGQUFCMDYwMUYzMkE4MzUiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4QRherAAABs0lEQVR42qyUzU4CMRCAG4RdUGB3AwY9SQgxnpSTxoMHH8HH0QfQV/LugXhTvBA1hJsSTCCActh26nS7W2rLxgPbzCaT+fk609k2f985JVmvPH4X1zcZEh/ubgWUvg3Y+CsT4tZuPa6UcEaAZVMnZzGUU8YpNbyTwfvi8wOV8t5+0Gr/a4+ZVEGBcmZCMfPk6RGV584ZRvjNFurT4WAxGim7f9A0oUCT9rFMGqY1hAjBBRA7jceSGC87K+o4F9VMeRgaslOrCVbCRZxORBcG2FnyGKP2GeXWnl6jgdVhsgTpBQpiEGCAnSWPMWo/DIVYy6vXde6K6HnCtS5FGlMrjXfmsNaYGs+09mFd0GwyXS6+/0wmmRsHqAa+nZJbQUMxKMM9n82XP0t9Mupk1f9QqVbMSsNk+gAUmCkGsVhyUfT/AQPsLAAFZcx265NxXWe75KKgorhRol3N6kYBMHMgrlOQ+aiUio4MQAXHpOx2Fo/uiIAywTTdjltAkbruTbPHg1JQ4IT4PptMN333Al+gEDo8Pie9bvvoMFcub/rsEdLvvyIw/3J5JQy9bibPKRIR+CvAAC1ogUXRQaD+AAAAAElFTkSuQmCC") left top no-repeat;}
#Dialog_Ok{float:right;height:20px;line-height:20px;font-size:12px;padding:0 10px;margin:4px 7px 0 0;cursor:default;}
#Dialog_Cancel{float:right;height:20px;line-height:20px;font-size:12px;padding:0 10px;margin:4px 7px 0 0;cursor:default;}
#Dialog_Reset{float:right;height:20px;line-height:20px;font-size:12px;padding:0 10px;margin:4px 7px 0 0;cursor:default;}
.dialogBtn{color:#142A3B;border:1px solid #5082A3;background-color:#6CAAD9;background-image:-webkit-linear-gradient(top, #B1D3EC 0%, #6CAAD9 100%);background-image:-moz-linear-gradient(top, #B1D3EC 0%, #6CAAD9 100%);background-image:-o-linear-gradient(top, #B1D3EC 0%, #6CAAD9 100%);background-image:-ms-linear-gradient(top, #B1D3EC 0%, #6CAAD9 100%);background-image:linear-gradient(top, #B1D3EC 0%, #6CAAD9 100%);-webkit-box-shadow:inset 0 0 2px #D7E8F5;box-shadow:inset 0 0 2px #D7E8F5;}
.dialogBtn:hover{color:#184747;border:1px solid #009999;background-color:#66CCCC;background-image:-webkit-linear-gradient(top, #ACE6E6 0%, #66CCCC 100%);background-image:-moz-linear-gradient(top, #ACE6E6 0%, #66CCCC 100%);background-image:-o-linear-gradient(top, #ACE6E6 0%, #66CCCC 100%);background-image:-ms-linear-gradient(top, #ACE6E6 0%, #66CCCC 100%);background-image:linear-gradient(top, #ACE6E6 0%, #66CCCC 100%);-webkit-box-shadow:inset 0 0 2px #D4F2F2;box-shadow:inset 0 0 2px #D4F2F2;}
.dialogBtn:active{color:#8C0000;border:1px solid #D90000;background-color:#FFCCBF;background-image:-webkit-linear-gradient(top, #FFCCBF 0%, #FF9980 100%);background-image:-moz-linear-gradient(top, #FFCCBF 0%, #FF9980 100%);background-image:-o-linear-gradient(top, #FFCCBF 0%, #FF9980 100%);background-image:-ms-linear-gradient(top, #FFCCBF 0%, #FF9980 100%);background-image:linear-gradient(top, #FFCCBF 0%, #FF9980 100%);-webkit-box-shadow:inset 0 0 2px #FFE6DF;box-shadow:inset 0 0 2px #FFE6DF;}
