html 实现邮箱边框,纯js实现仿QQ邮箱弹出确认框

QQ邮箱的弹出层

body {

background: none repeat scroll 0 0 #FFFFFF;

font-family: "lucida Grande",Verdana;

font-size: 12px;

}

select, body, textarea {

font-size: 12px;

}

.tipbg {

margin: 0;

padding: 0;

background-color: transparent;

}

.qmpanel_shadow {

border-radius: 3px 3px 3px 3px;

box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);

}

.bd_upload {

border: 1px solid #628D0B;

}

.bd_upload {

border: 1px solid #628D0B;

}

.fdbody {

border-left: 8px solid #FFFFFF;

border-right: 1px solid #87A34D;

}

.fdbody, .tipstitle {

background: none repeat scroll 0 0 #9BBB59;

}

.editor_dialog_title {

color: white;

font: bold 12px "lucida Grande",Verdana;

padding: 9px 0 7px 10px;

text-align: left;

}

.editor_dialog_content {

background: none repeat scroll 0 0 #FFFFFF;

filter: none;

margin: 0;

padding: 0;

text-align: center;

}

.mailinfo {

border-bottom: 2px solid #FFFFFF;

}

.mailinfo {

background: none repeat scroll 0 0 #FFFFFF;

}

.cnfx_content {

padding: 10px 0 5px 10px;

text-align: left;

}

.cnfx_status {

float: left;

padding: 0 0 0 10px;

}

.cnfx_btn {

padding: 0 10px 10px 0;

text-align: right;

}

.b_size {

font-size: 14px;

}

.editor_close {

background: none repeat scroll 0 0 #DC4835;

}

/** when mouseover,add editor_close_mover*/

.editor_close, .editor_close_mover {

border: 1px solid #A7190F;

cursor: pointer;

float: right;

margin: 7px 7px 0 0;

}

.editor_close img, .editor_close_mover img, .editor_min img, .editor_min_mover img {

display: block;

}

img {

border: medium none;

}

.wd2 {

margin: 1px 1px 0 0;

width: 64px;

}

.btn, button, .qm_btn {

padding-left: 0;

padding-right: 0;

}

input, textarea, a {

outline: medium none;

}

.editor_mask {

background: none repeat scroll 0 0 #FFFFFF;

height: 100%;

left: 0;

opacity: 0.5;

position: absolute;

top: 0;

width: 100%;

}

/ 拖拽工具类

var DragUtil = (function(){

var doc = document;

var moveX = 0;

var moveY = 0;

var moveTop = 0;

var moveLeft = 0;

var moveable = false;

return {

/**

* 注册拖拽

* 需要传入整个窗体id和标题部分的id

*/

regist:function(winId,titleId) {

// 页面头部要加上:

//

// 不然会有问题的

var width = doc.documentElement.clientWidth;

var height = doc.documentElement.clientHeight;

var title = doc.getElementById(titleId);

var win = doc.getElementById(winId);

title.onmousedown = function() {

var evt = DragUtil._getEvent();

moveable = true;

moveX = evt.clientX;

moveY = evt.clientY;

moveTop = parseInt(win.style.top);

moveLeft = parseInt(win.style.left);

doc.onmousemove = function() {

if (moveable) {

var evt = DragUtil._getEvent();

var x = moveLeft + evt.clientX - moveX;

var y = moveTop + evt.clientY - moveY;

var w = parseInt(win.style.width);

var h = parseInt(win.style.height);

if ( x > 0 &&( x + w < width) && y > 0 && (y + h < height) ) {

win.style.left = x + "px";

win.style.top = y + "px";

}

}

};

doc.onmouseup = function () {

if (moveable) {

//doc.onmousemove = docMouseMoveEvent;

//doc.onmouseup = docMouseUpEvent;

moveable = false;

moveX = 0;

moveY = 0;

moveTop = 0;

moveLeft = 0;

}

};

}

}

/**

* 获取事件

*/

,_getEvent:function(){

return window.event || arguments.callee.caller.arguments[0];

}

}

})()

///

function init(){

DragUtil.regist("WindowId","titleId")

DragUtil.regist("WindowId2","titleId2")

}

style="z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 124px; margin-top: 0pt;"

class="" id="WindowId" qmanimation_play="|undefined">

id="QMconfirm___opashow_">

style="width: 447px; height: 163px;background: white;"

class="bd_upload">

style="height: 28px; border: none; background-image: none; cursor: move; overflow: hidden;"

class="editor_dialog_titlebar fdbody"

id="QMconfirm___title_td_">

id="QMconfirm___title_div_"

style="cursor: default; float: right; width: 40px; border: none; background-image: none;"

class="fdbody">

οnmοuseοver="this.className='editor_close_mover';"

class="editor_close" id="QMconfirm___closebtn2_">

删除确认

style="height: 131px; border: medium none; visibility: visible;"

class="editor_dialog_content " id="QMconfirm___content_">

class="mailinfo"

style="border: none; height: 100%; display: inline;">

style="float: left; margin: 5px 10px 0; display: block;"

src="https://www.jb51.net/jscss/demoimg/201109/ico_question.gif">

style="padding-top: 10px; word-break: break-all; line-height: 150%;"> 彻底删除后邮件将无法恢复，您确定要删除吗？

style="z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 324px; margin-top: 0pt;"

class="" id="WindowId2" qmanimation_play="|undefined">

删除确认

style="float: left; margin: 5px 10px 0; display:none;" src="https://www.jb51.net/jscss/demoimg/201109/ico_question.gif"> 彻底删除 后邮件将无法恢复，您确定要删除吗？ type="button" value="" style="display: none;" id="QMconfirm__never" class="wd2 btn">