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

2015-04-29 14:11作者：zhao

代码非常简单，这里就不多废话了。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

<TITLE>QQ邮箱的弹出层</TITLE>

<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>

<style>

body{

background:nonerepeatscroll00#FFFFFF;

font-family:"lucidaGrande",Verdana;

font-size:12px;

}

select,body,textarea{

font-size:12px;

}

.tipbg{

margin:0;

padding:0;

background-color:transparent;

}

.qmpanel_shadow{

border-radius:3px3px3px3px;

box-shadow:02px7pxrgba(0,0,0,0.35);

}

.bd_upload{

border:1pxsolid#628D0B;

}

.bd_upload{

border:1pxsolid#628D0B;

}

.fdbody{

border-left:8pxsolid#FFFFFF;

border-right:1pxsolid#87A34D;

}

.fdbody,.tipstitle{

background:nonerepeatscroll00#9BBB59;

}

.editor_dialog_title{

color:white;

font:bold12px"lucidaGrande",Verdana;

padding:9px07px10px;

text-align:left;

}

.editor_dialog_content{

background:nonerepeatscroll00#FFFFFF;

filter:none;

margin:0;

padding:0;

text-align:center;

}

.mailinfo{

border-bottom:2pxsolid#FFFFFF;

}

.mailinfo{

background:nonerepeatscroll00#FFFFFF;

}

.cnfx_content{

padding:10px05px10px;

text-align:left;

}

.cnfx_status{

float:left;

padding:00010px;

}

.cnfx_btn{

padding:010px10px0;

text-align:right;

}

.b_size{

font-size:14px;

}

.editor_close{

background:nonerepeatscroll00#DC4835;

}

/**whenmouseover,addeditor_close_mover*/

.editor_close,.editor_close_mover{

border:1pxsolid#A7190F;

cursor:pointer;

float:right;

margin:7px7px00;

}

.editor_closeimg,.editor_close_moverimg,.editor_minimg,.editor_min_moverimg{

display:block;

}

img{

border:mediumnone;

}

.wd2{

margin:1px1px00;

width:64px;

}

.btn,button,.qm_btn{

padding-left:0;

padding-right:0;

}

input,textarea,a{

outline:mediumnone;

}

.editor_mask{

background:nonerepeatscroll00#FFFFFF;

height:100%;

left:0;

opacity:0.5;

position:absolute;

top:0;

width:100%;

}

</style>

/////////拖拽工具类////////

varDragUtil=(function(){

vardoc=document;

varmoveX=0;

varmoveY=0;

varmoveTop=0;

varmoveLeft=0;

varmoveable=false;

return{

/**

*注册拖拽

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

regist:function(winId,titleId){

//页面头部要加上:

//<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

//不然会有问题的

varwidth=doc.documentElement.clientWidth;

varheight=doc.documentElement.clientHeight;

vartitle=doc.getElementById(titleId);

varwin=doc.getElementById(winId);

title.onmousedown=function(){

varevt=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){

varevt=DragUtil._getEvent();

varx=moveLeft+evt.clientX-moveX;

vary=moveTop+evt.clientY-moveY;

varw=parseInt(win.style.width);

varh=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(){

returnwindow.event||arguments.callee.caller.arguments[0];

}

})()

///////////////////////

functioninit(){

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

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

}

</script>

</HEAD>

<BODYonload="init()">

<spanid="qmdialog_container"><div

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">

<divclass="tipbg">

<divstyle="background:#DDD;"class="opashowOuterqmpanel_shadow"

id="QMconfirm___opashow_">

<tablecellspacing="0"cellpadding="0"

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

class="bd_upload">

<tbody>

<tr>

<divonmouseout="this.className='editor_close';" onmouseover="this.className='editor_close_mover';" class="editor_close"id="QMconfirm___closebtn2_">

<imgheight="12"width="12"ondragstart="returnfalse;"src="http://down.admin5.com/info/jscss/demoimg/201109/ico_closetip.gif">

</div>

<divid="titleId"class="editor_dialog_title">删除确认</div>

</td>

</tr>

<tr>

<tdvalign="top"style="height:131px;border:mediumnone;visibility:visible;"class="editor_dialog_content"id="QMconfirm___content_"><divclass="mailinfo"style="border:none;height:100%;display:inline;">

<divclass="">

<divclass="cnfx_content">

<imgalign="absmiddle" style="float:left;margin:5px10px0;display:block;" src="http://down.admin5.com/info/jscss/demoimg/201109/ico_question.gif">

<tablestyle="width:350px;height:80px;">

<tbody>

<tr>

<tdstyle="vertical-align:top;"><divclass="b_size"style="padding-top:10px;word-break:break-all;line-height:150%;">

<div>彻底删除后邮件将无法恢复，您确定要删除吗？</div>

</div></td></tr></tbody>

</table>

</div>

<divstyle="display:none;"class="cnfx_status">

<inputtype="checkbox"id="QMconfirm__recordstatus"><labelfor="QMconfirm__recordstatus"></label>

</div>

<divclass="cnfx_btn">

<inputtype="button"value="确定"id="QMconfirm__confirm"class="wd2btn"><inputtype="button"value="取消"style="display:;"id="QMconfirm__cancel"class="wd2btn"><inputtype="button"value=""style="display:none;"id="QMconfirm__never"class="wd2btn">

</div>

</td>

</tr>

</tbody>

</table>

</div>

</span>

<spanid="qmdialog_container">

<divclass="tipbg">

<divstyle="background:#DDD;"class="opashowOuterqmpanel_shadow"id="QMconfirm___opashow_">

<tablecellspacing="0"cellpadding="0"style="width:447px;height:163px;background:white;"class="bd_upload">

<tbody>

<tr>

<tdstyle="height:28px;border:none;background-image:none;cursor:move;overflow:hidden;"class="editor_dialog_titlebarfdbody"id="QMconfirm___title_td_"><divid="QMconfirm___title_div_"style="cursor:default;float:right;width:40px;border:none;background-image:none;"class="fdbody">

<divonmouseout="this.className='editor_close';"onmouseover="this.className='editor_close_mover';"class="editor_close"id="QMconfirm___closebtn2_">

<imgheight="12"width="12"ondragstart="returnfalse;"src="http://down.admin5.com/info/jscss/demoimg/201109/ico_closetip.gif">

</div>

<divid="titleId2"class="editor_dialog_title">删除确认</div>

</td>

</tr>

<tr>

<tdvalign="top"style="height:131px;border:mediumnone;visibility:visible;"class="editor_dialog_content"id="QMconfirm___content_"><divclass="mailinfo"style="border:none;height:100%;display:inline;">

<divclass="">

<divclass="cnfx_content">

<imgalign="absmiddle"style="float:left;margin:5px10px0;display:none;"src="http://down.admin5.com/info/jscss/demoimg/201109/ico_question.gif">

<tablestyle="width:350px;height:80px;">

<tbody>

<tr>

<tdstyle="vertical-align:top;"><divclass="b_size"style="padding-top:10px;word-break:break-all;line-height:150%;">

<div>彻底删除

后邮件将无法恢复，您确定要删除吗？</div>

</div>

</td>

</tr>

</tbody>

</table>

</div>

<divstyle="display:none;"class="cnfx_status">

<inputtype="checkbox"id="QMconfirm__recordstatus"><labelfor="QMconfirm__recordstatus"></label>

</div>

<divclass="cnfx_btn">

<inputtype="button"value="确定"id="QMconfirm__confirm"class="wd2btn"><inputtype="button"value="取消"style="display:;"id="QMconfirm__cancel"class="wd2btn">

</div>

</td>

</tr>

</tbody>

</table>

</div>

</span>

</BODY>

</HTML>

以上所述就是本文的全部内容了，希望大家能够喜欢。