纯js实现仿QQ邮箱弹出确认框
代码非常简单，这里就不多废话了。
<!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>
<script>
/////////拖拽工具类////////
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>
<td
style="height:28px;border:none;background-image:none;cursor:move;overflow:hidden;"
class="editor_dialog_titlebarfdbody"
id="QMconfirm___title_td_"><div
id="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="https://www.nhooo.com/jscss/demoimg/201109/ico_closetip.gif">
</div>
</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_"><div
class="mailinfo"
style="border:none;height:100%;display:inline;">
<divclass="">
<divclass="cnfx_content">
<imgalign="absmiddle"
style="float:left;margin:5px10px0;display:block;"
src="https://www.nhooo.com/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>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</span>
<spanid="qmdialog_container"><div
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">
<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="https://www.nhooo.com/jscss/demoimg/201109/ico_closetip.gif">
</div>
</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="https://www.nhooo.com/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"><input
type="button"value=""style="display:none;"
id="QMconfirm__never"class="wd2btn">
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</span>
</BODY>
</HTML>
以上所述就是本文的全部内容了，希望大家能够喜欢。