仿QQ邮箱的弹出层代码，弹出确认框，可移动

发布时间：2018-08-20 20:01:30 所属栏目：活动来源：站长网

导读：仿 QQ邮箱的弹出层代码，弹出确认框，可移动，主要是用火狐的firebug把html和css扣了下来，没有做封装，因此效果还不是太完整，您点击下边的运行就明白了，弹出层和弹出的确认框只能移动，还不能关闭，有时间和技术的朋友不妨完善一下，到时别忘记给烈火

　　仿QQ邮箱的弹出层代码，弹出确认框，可移动，主要是用火狐的firebug把html和css扣了下来，没有做封装，因此效果还不是太完整，您点击下边的运行就明白了，弹出层和弹出的确认框只能移动，还不能关闭，有时间和技术的朋友不妨完善一下，到时别忘记给烈火的网友留下完整代码哦！

　　示例：

<!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 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"> <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="/uploads/allimg/1109/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_"><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: block;" src="/uploads/allimg/1109/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"><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"> <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="/uploads/allimg/1109/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="/uploads/allimg/1109/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> </BODY> </HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：西安站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!