纯js实现仿QQ邮箱弹出确认框_javascript技巧
代码非常简单,这里就不多废话了。
<!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 src="/static/imghw/default1.png" data-src="http://www.jb51.net/jscss/demoimg/201109/ico_closetip.gif" class="lazy" style="max-width:90%" style="max-width:90%" ondragstart="return false;" alt="纯js实现仿QQ邮箱弹出确认框_javascript技巧" > </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 src="/static/imghw/default1.png" data-src="http://www.jb51.net/jscss/demoimg/201109/ico_question.gif" class="lazy" align="absmiddle" style="float: left; margin: 5px 10px 0; display: block;"> <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 src="/static/imghw/default1.png" data-src="http://www.jb51.net/jscss/demoimg/201109/ico_closetip.gif" class="lazy" style="max-width:90%" style="max-width:90%" ondragstart="return false;" alt="纯js实现仿QQ邮箱弹出确认框_javascript技巧" > </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 src="/static/imghw/default1.png" data-src="http://www.jb51.net/jscss/demoimg/201109/ico_question.gif" class="lazy" align="absmiddle" style="float: left; margin: 5px 10px 0; display:none;"> <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"><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>
以上所述就是本文的全部内容了,希望大家能够喜欢。

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属,在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别,大大缩短了用户等待时间,提高了用户体验;弱势是:受到模型大小限制,其中准确率也有限。如何在web端使用js实现人脸检测呢?为了实现Web端人脸识别,需要熟悉相关的编程语言和技术,如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是,由于Web端的计

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形,通过绘制股票的开盘价、收盘价、最高价和最低价等数据,帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图,并附上具体的代码示例。一、准备工作在开始之前,我们需要准备以下环境:1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

股票分析必备工具:学习PHP和JS绘制蜡烛图的步骤,需要具体代码示例随着互联网和科技的快速发展,股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环,其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息,帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台,在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能,并提供具体的代码示例。一、准备工作使用百度地图API前,首先需要在百度地图开放平台(http://lbsyun.baidu.com/)上申请一个开发者账号,并创建一个应用。创建完成

如何使用JS和百度地图实现地图点击事件处理功能概述:在Web开发中,经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能,并给出具体的代码示例。步骤:导入百度地图的API文件首先,要在HTML文件中导入百度地图API的文件,可以通过以下代码实现:

如何使用JS和百度地图实现地图热力图功能简介:随着互联网和移动设备的迅速发展,地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式,能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能,并提供具体的代码示例。准备工作:在开始之前,你需要准备以下事项:一个百度开发者账号,并创建一个应用,获取到相应的AP

随着互联网金融的迅速发展,股票投资已经成为了越来越多人的选择。而在股票交易中,蜡烛图是一种常用的技术分析方法,它能够显示股票价格的变化趋势,帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧,带领读者了解如何绘制股票蜡烛图,并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前,我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

js和vue的关系:1、JS作为Web开发基石;2、Vue.js作为前端框架的崛起;3、JS与Vue的互补关系;4、JS与Vue的实践应用。
