代码非常简单，这里就不多废话了。
<!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"><div id="WindowId" qmanimation_play="|undefined"> <div> <div id="QMconfirm___opashow_"> <table cellspacing="0" cellpadding="0" > <tbody> <tr> <td id="QMconfirm___title_td_"><div id="QMconfirm___title_div_" > <div onmouseout="this.className='editor_close';" onmouseover="this.className='editor_close_mover';" id="QMconfirm___closebtn2_"> <img height="12" width="12" ondragstart="return false;" src="http://www.jb51.net/jscss/demoimg/201109/ico_closetip.gif"> </div> </div> <div id="titleId">删除确认</div> </td> </tr> <tr> <td valign="top" id="QMconfirm___content_"><div > <div> <div> <img align="absmiddle" src="http://www.jb51.net/jscss/demoimg/201109/ico_question.gif"> <table> <tbody> <tr> <td><div > <div>彻底删除后邮件将无法恢复，您确定要删除吗？</div> </div></td></tr></tbody> </table> </div> <div> <input type="checkbox" id="QMconfirm__recordstatus"><label for="QMconfirm__recordstatus"></label> </div> <div> <input type="button" value="确定" id="QMconfirm__confirm"><input type="button" value="取消" id="QMconfirm__cancel"><input type="button" value="" id="QMconfirm__never"> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </span> <span id="qmdialog_container"><div id="WindowId2" qmanimation_play="|undefined"> <div> <div id="QMconfirm___opashow_"> <table cellspacing="0" cellpadding="0"> <tbody> <tr> <td id="QMconfirm___title_td_"><div id="QMconfirm___title_div_"> <div onmouseout="this.className='editor_close';" onmouseover="this.className='editor_close_mover';" id="QMconfirm___closebtn2_"> <img height="12" width="12" ondragstart="return false;" src="http://www.jb51.net/jscss/demoimg/201109/ico_closetip.gif"> </div> </div> <div id="titleId2">删除确认</div> </td> </tr> <tr> <td valign="top" id="QMconfirm___content_"><div> <div> <div> <img align="absmiddle" src="http://www.jb51.net/jscss/demoimg/201109/ico_question.gif"> <table> <tbody> <tr> <td><div> <div>彻底删除 后邮件将无法恢复，您确定要删除吗？</div> </div> </td> </tr> </tbody> </table> </div> <div> <input type="checkbox" id="QMconfirm__recordstatus"><label for="QMconfirm__recordstatus"></label> </div> <div> <input type="button" value="确定" id="QMconfirm__confirm"><input type="button" value="取消" id="QMconfirm__cancel"><input type="button" value="" id="QMconfirm__never"> </div> </div> </div> </td> </tr> </tbody> </table> </div> </div> </div> </span> </BODY> </HTML>
以上所述就是本文的全部内容了，希望大家能够喜欢。
【纯js实现仿QQ邮箱弹出确认框】相关文章：
★ javascript实现Table间隔色以及选择高亮的方法
★ javascript实现点击商品列表checkbox实时统计金额的方法