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

2019-11-20 12:35:16

字体：大中小

来源：转载

供稿：网友

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><HTML><HEAD><TITLE>QQ邮箱的弹出层</TITLE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>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%;}</style><script>///////// 拖拽工具类 ////////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) {// 页面头部要加上:// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">// 不然会有问题的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")} </script></HEAD><BODY onload="init()"><span id="qmdialog_container"><divstyle="z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 124px; margin-top: 0pt;"class="" id="WindowId" qmanimation_play="|undefined"><div class="tipbg"><div style="background: #DDD;" class="opashowOuter qmpanel_shadow"id="QMconfirm___opashow_"><table cellspacing="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_titlebar fdbody"id="QMconfirm___title_td_"><divid="QMconfirm___title_div_"style="cursor: default; float: right; width: 40px; border: none; background-image: none;"class="fdbody"><div onmouseout="this.className='editor_close';"onmouseover="this.className='editor_close_mover';"class="editor_close" id="QMconfirm___closebtn2_"><img height="12" width="12" ondragstart="return false;" src="//www.VeVB.COm/jscss/demoimg/201109/ico_closetip.gif"></div></div><div id="titleId" class="editor_dialog_title">删除确认</div></td></tr><tr><td valign="top"style="height: 131px; border: medium none; visibility: visible;"class="editor_dialog_content " id="QMconfirm___content_"><divclass="mailinfo"style="border: none; height: 100%; display: inline;"><div class=""><div class="cnfx_content"><img align="absmiddle"style="float: left; margin: 5px 10px 0; display: block;"src="//www.VeVB.COm/jscss/demoimg/201109/ico_question.gif"><table style="width: 350px; height: 80px;"><tbody><tr><td style="vertical-align: top;"><div class="b_size"style="padding-top: 10px; word-break: break-all; line-height: 150%;"><div>彻底删除后邮件将无法恢复，您确定要删除吗？</div></div></td></tr></tbody></table></div><div style="display: none;" class="cnfx_status"><input type="checkbox" id="QMconfirm__recordstatus"><label for="QMconfirm__recordstatus"></label></div><div class="cnfx_btn"><input type="button" value="确定" id="QMconfirm__confirm" class="wd2 btn"><input type="button" value="取消" style="display: ;" id="QMconfirm__cancel" class="wd2 btn"><input type="button" value="" style="display: none;" id="QMconfirm__never" class="wd2 btn"></div></div></div></td></tr></tbody></table></div></div></div></span><span id="qmdialog_container"><divstyle="z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 324px; margin-top: 0pt;"class="" id="WindowId2" qmanimation_play="|undefined"><div class="tipbg"><div style="background: #DDD;" class="opashowOuter qmpanel_shadow" id="QMconfirm___opashow_"><table cellspacing="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_titlebar fdbody" id="QMconfirm___title_td_"><div id="QMconfirm___title_div_" style="cursor: default; float: right; width: 40px; border: none; background-image:none;" class="fdbody"><div onmouseout="this.className='editor_close';" onmouseover="this.className='editor_close_mover';" class="editor_close" id="QMconfirm___closebtn2_"><img height="12" width="12" ondragstart="return false;" src="//www.VeVB.COm/jscss/demoimg/201109/ico_closetip.gif"></div></div><div id="titleId2" class="editor_dialog_title">删除确认</div></td></tr><tr><td valign="top" style="height: 131px; border: medium none; visibility: visible;" class="editor_dialog_content " id="QMconfirm___content_"><div class="mailinfo" style="border: none; height: 100%; display: inline;"><div class=""><div class="cnfx_content"><img align="absmiddle"style="float: left; margin: 5px 10px 0; display:none;" src="//www.VeVB.COm/jscss/demoimg/201109/ico_question.gif"><table style="width: 350px; height: 80px;"><tbody><tr><td style="vertical-align: top;"><div class="b_size" style="padding-top: 10px; word-break: break-all; line-height: 150%;"><div>彻底删除后邮件将无法恢复，您确定要删除吗？</div></div></td></tr></tbody></table></div><div style="display: none;" class="cnfx_status"><input type="checkbox" id="QMconfirm__recordstatus"><label for="QMconfirm__recordstatus"></label></div><div class="cnfx_btn"><input type="button" value="确定" id="QMconfirm__confirm" class="wd2 btn"><input type="button" value="取消" style="display: ;" id="QMconfirm__cancel" class="wd2btn"><inputtype="button" value="" style="display: none;"id="QMconfirm__never" class="wd2 btn"></div></div></div></td></tr></tbody></table></div></div></div></span> </BODY></HTML>

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

上一篇：Js实现无刷新删除内容

下一篇：jQuery()方法的第二个参数详解