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

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

　　示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <HTML><br /> <HEAD><br /> <TITLE>QQ邮箱的弹出层</TITLE><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <style><br /> body {<br /> background: none repeat scroll 0 0 #FFFFFF;<br /> font-family: "lucida Grande",Verdana;<br /> font-size: 12px;<br /> }<br /> select, body, textarea {<br /> font-size: 12px;<br /> }<br /> .tipbg {<br /> margin: 0;<br /> padding: 0;<br /> background-color: transparent;<br /> }<br /> .qmpanel_shadow {<br /> border-radius: 3px 3px 3px 3px;<br /> box-shadow: 0 2px 7px rgba(0, 0, 0, 0.35);<br /> }<br /> .bd_upload {<br /> border: 1px solid #628D0B;<br /> }<br /> .bd_upload {<br /> border: 1px solid #628D0B;<br /> }<br /> .fdbody {<br /> border-left: 8px solid #FFFFFF;<br /> border-right: 1px solid #87A34D;<br /> }<br /> .fdbody, .tipstitle {<br /> background: none repeat scroll 0 0 #9BBB59;<br /> }<br /> .editor_dialog_title {<br /> color: white;<br /> font: bold 12px "lucida Grande",Verdana;<br /> padding: 9px 0 7px 10px;<br /> text-align: left;<br /> }<br /> .editor_dialog_content {<br /> background: none repeat scroll 0 0 #FFFFFF;<br /> filter: none;<br /> margin: 0;<br /> padding: 0;<br /> text-align: center;<br /> }<br /> .mailinfo {<br /> border-bottom: 2px solid #FFFFFF;<br /> }<br /> .mailinfo {<br /> background: none repeat scroll 0 0 #FFFFFF;<br /> }<br /> .cnfx_content {<br /> padding: 10px 0 5px 10px;<br /> text-align: left;<br /> }<br /> .cnfx_status {<br /> float: left;<br /> padding: 0 0 0 10px;<br /> }<br /> .cnfx_btn {<br /> padding: 0 10px 10px 0;<br /> text-align: right;<br /> }<br /> .b_size {<br /> font-size: 14px;<br /> }<br /> .editor_close {<br /> background: none repeat scroll 0 0 #DC4835;<br /> }<br /> /** when mouseover,add editor_close_mover*/<br /> .editor_close, .editor_close_mover {<br /> border: 1px solid #A7190F;<br /> cursor: pointer;<br /> float: right;<br /> margin: 7px 7px 0 0;<br /> }<br /> .editor_close img, .editor_close_mover img, .editor_min img, .editor_min_mover img {<br /> display: block;<br /> }<br /> img {<br /> border: medium none;<br /> }<br /> .wd2 {<br /> margin: 1px 1px 0 0;<br /> width: 64px;<br /> }<br /> .btn, button, .qm_btn {<br /> padding-left: 0;<br /> padding-right: 0;<br /> }<br /> input, textarea, a {<br /> outline: medium none;<br /> }<br /> .editor_mask {<br /> background: none repeat scroll 0 0 #FFFFFF;<br /> height: 100%;<br /> left: 0;<br /> opacity: 0.5;<br /> position: absolute;<br /> top: 0;<br /> width: 100%;<br /> }<br /> </style><br /> <script><br /> ///////// 拖拽工具类 ////////<br /> var DragUtil = (function(){<br /> var doc = document;<br /> var moveX = 0;<br /> var moveY = 0;<br /> var moveTop = 0;<br /> var moveLeft = 0;<br /> var moveable = false;<br /> return {<br /> /**<br /> * 注册拖拽<br /> * 需要传入整个窗体id和标题部分的id<br /> */<br /> regist:function(winId,titleId) {<br /> // 页面头部要加上:<br /> // <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> // 不然会有问题的<br /> var width = doc.documentElement.clientWidth;<br /> var height = doc.documentElement.clientHeight;<br /> var title = doc.getElementById(titleId);<br /> var win = doc.getElementById(winId);<br /> title.onmousedown = function() {<br /> var evt = DragUtil._getEvent();<br /> moveable = true;<br /> moveX = evt.clientX;<br /> moveY = evt.clientY;<br /> moveTop = parseInt(win.style.top);<br /> moveLeft = parseInt(win.style.left);<br /> doc.onmousemove = function() {<br /> if (moveable) {<br /> var evt = DragUtil._getEvent();<br /> var x = moveLeft + evt.clientX - moveX;<br /> var y = moveTop + evt.clientY - moveY;<br /> var w = parseInt(win.style.width);<br /> var h = parseInt(win.style.height);<br /> if ( x > 0 &&( x + w < width) && y > 0 && (y + h < height) ) {<br /> win.style.left = x + "px";<br /> win.style.top = y + "px";<br /> }<br /> }<br /> };<br /> doc.onmouseup = function () {<br /> if (moveable) {<br /> //doc.onmousemove = docMouseMoveEvent;<br /> //doc.onmouseup = docMouseUpEvent;<br /> moveable = false;<br /> moveX = 0;<br /> moveY = 0;<br /> moveTop = 0;<br /> moveLeft = 0;<br /> }<br /> };<br /> }<br /> }<br /> /**<br /> * 获取事件<br /> */<br /> ,_getEvent:function(){<br /> return window.event || arguments.callee.caller.arguments[0];<br /> }<br /> }<br /> })()<br /> ///////////////////////<br /> function init(){<br /> DragUtil.regist("WindowId","titleId")<br /> DragUtil.regist("WindowId2","titleId2")<br /> }<br /> </script><br /> </HEAD><br /> <BODY onload="init()"><br /> <span id="qmdialog_container"><div<br /> style="z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 124px; margin-top: 0pt;"<br /> class="" id="WindowId" qmanimation_play="|undefined"><br /> <div class="tipbg"><br /> <div style="background: #DDD;" class="opashowOuter qmpanel_shadow"<br /> id="QMconfirm___opashow_"><br /> <table cellspacing="0" cellpadding="0"<br /> style="width: 447px; height: 163px;background: white;"<br /> class="bd_upload"><br /> <tbody><br /> <tr><br /> <td<br /> style="height: 28px; border: none; background-image: none; cursor: move; overflow: hidden;"<br /> class="editor_dialog_titlebar fdbody"<br /> id="QMconfirm___title_td_"><div<br /> id="QMconfirm___title_div_"<br /> style="cursor: default; float: right; width: 40px; border: none; background-image: none;"<br /> class="fdbody"><br /> <div onmouseout="this.className='editor_close';"<br /> onmouseover="this.className='editor_close_mover';"<br /> class="editor_close" id="QMconfirm___closebtn2_"><br /> <img height="12" width="12" ondragstart="return false;" src="/uploads/allimg/1109/ico_closetip.gif"><br /> </div><br /> </div><br /> <div id="titleId" class="editor_dialog_title">删除确认</div><br /> </td><br /> </tr><br /> <tr><br /> <td valign="top"<br /> style="height: 131px; border: medium none; visibility: visible;"<br /> class="editor_dialog_content " id="QMconfirm___content_"><div<br /> class="mailinfo"<br /> style="border: none; height: 100%; display: inline;"><br /> <div class=""><br /> <div class="cnfx_content"><br /> <img align="absmiddle"<br /> style="float: left; margin: 5px 10px 0; display: block;"<br /> src="/uploads/allimg/1109/ico_question.gif"><br /> <table style="width: 350px; height: 80px;"><br /> <tbody><br /> <tr><br /> <td style="vertical-align: top;"><div class="b_size"<br /> style="padding-top: 10px; word-break: break-all; line-height: 150%;"><br /> <div>彻底删除后邮件将无法恢复，您确定要删除吗？</div><br /> </div></td></tr></tbody><br /> </table><br /> </div><br /> <div style="display: none;" class="cnfx_status"><br /> <input type="checkbox" id="QMconfirm__recordstatus"><label<br /> for="QMconfirm__recordstatus"></label><br /> </div><br /> <div class="cnfx_btn"><br /> <input type="button" value="确定" id="QMconfirm__confirm"<br /> class="wd2 btn"><input type="button" value="取消"<br /> style="display: ;" id="QMconfirm__cancel" class="wd2 btn"><input<br /> type="button" value="" style="display: none;"<br /> id="QMconfirm__never" class="wd2 btn"><br /> </div><br /> </div><br /> </div><br /> </td><br /> </tr><br /> </tbody><br /> </table><br /> </div><br /> </div><br /> </div><br /> </span><br /> <span id="qmdialog_container"><div<br /> style="z-index: 1120; position: absolute; width: 447px; height: 163px; opacity: 1; left: 514px; top: 324px; margin-top: 0pt;"<br /> class="" id="WindowId2" qmanimation_play="|undefined"><br /> <div class="tipbg"><br /> <div style="background: #DDD;" class="opashowOuter qmpanel_shadow"<br /> id="QMconfirm___opashow_"><br /> <table cellspacing="0" cellpadding="0"<br /> style="width: 447px; height: 163px;background: white;"<br /> class="bd_upload"><br /> <tbody><br /> <tr><br /> <td<br /> style="height: 28px; border: none; background-image: none; cursor: move; overflow: hidden;"<br /> class="editor_dialog_titlebar fdbody"<br /> id="QMconfirm___title_td_"><div<br /> id="QMconfirm___title_div_"<br /> style="cursor: default; float: right; width: 40px; border: none; background-image: none;"<br /> class="fdbody"><br /> <div onmouseout="this.className='editor_close';"<br /> onmouseover="this.className='editor_close_mover';"<br /> class="editor_close" id="QMconfirm___closebtn2_"><br /> <img height="12" width="12" ondragstart="return false;"<br /> src="/uploads/allimg/1109/ico_closetip.gif"><br /> </div><br /> </div><br /> <div id="titleId2" class="editor_dialog_title">删除确认</div><br /> </td><br /> </tr><br /> <tr><br /> <td valign="top"<br /> style="height: 131px; border: medium none; visibility: visible;"<br /> class="editor_dialog_content " id="QMconfirm___content_"><div<br /> class="mailinfo"<br /> style="border: none; height: 100%; display: inline;"><br /> <div class=""><br /> <div class="cnfx_content"><br /> <img align="absmiddle"<br /> style="float: left; margin: 5px 10px 0; display:none;"<br /> src="/uploads/allimg/1109/ico_question.gif"><br /> <table style="width: 350px; height: 80px;"><br /> <tbody><br /> <tr><br /> <td style="vertical-align: top;"><div class="b_size"<br /> style="padding-top: 10px; word-break: break-all; line-height: 150%;"><br /> <div>彻底删除后邮件将无法恢复，您确定要删除吗？</div><br /> </div><br /> </td><br /> </tr><br /> </tbody><br /> </table><br /> </div><br /> <div style="display: none;" class="cnfx_status"><br /> <input type="checkbox" id="QMconfirm__recordstatus"><label<br /> for="QMconfirm__recordstatus"></label><br /> </div><br /> <div class="cnfx_btn"><br /> <input type="button" value="确定" id="QMconfirm__confirm"<br /> class="wd2 btn"><input type="button" value="取消"<br /> style="display: ;" id="QMconfirm__cancel" class="wd2 btn"><input<br /> type="button" value="" style="display: none;"<br /> id="QMconfirm__never" class="wd2 btn"><br /> </div><br /> </div><br /> </div><br /> </td><br /> </tr><br /> </tbody><br /> </table><br /> </div><br /> </div><br /> </div><br /> </span><br /> </BODY><br /> </HTML><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

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

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

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

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性