首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onApril 29, 2015

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

<!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="https://3water.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_"><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="https://3water.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"><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="https://3water.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="https://3water.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"><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>

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

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

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
做网页的一些技巧
Feb 01 Javascript
使用onbeforeunload属性后的副作用
Mar 08 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
Sep 15 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
JS使用H5实现图片预览功能
Sep 30 Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 Javascript
jQuery()方法的第二个参数详解
Apr 29 #Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 #Javascript
javascript通过元素id和name直接取得元素的方法
Apr 28 #Javascript
javascript中in运算符用法分析
Apr 28 #Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 #Javascript
chrome不支持form.submit的解决方案
Apr 28 #Javascript
javascript截取字符串小结
Apr 28 #Javascript
蒙特卡罗(1) ipyvizzu(1) 条形图(1) bufio(1) 阿里云(6) 可视化动图(1) pdfkit(1) matplotlib(7) 数据同步(1) 微信小程序(9)
You might like
超级实用的7个PHP代码片段分享
2012/01/05 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
PHP扩展框架之Yaf框架的安装与使用
2016/05/18 PHP
php基于curl实现随机ip地址抓取内容的方法
2016/10/11 PHP
php+lottery.js实现九宫格抽奖功能
2019/07/21 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
js 文件引入实现代码
2010/04/23 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
jQuery实现hover合成事件的方法
2015/08/06 Javascript
使用jquery获取url以及jquery获取url参数的实现方法
2016/05/25 Javascript
Nodejs中 npm常用命令详解
2016/07/04 NodeJs
JS实现颜色动态淡化效果
2017/03/06 Javascript
微信小程序 支付后台java实现实例
2017/05/09 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python中运行并行任务技巧
2015/02/26 Python
Python字符串匹配算法KMP实例
2015/07/18 Python
Python导入模块时遇到的错误分析
2017/08/30 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
基于python的图片修复程序（实现水印去除）
2018/06/04 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
python写入文件自动换行问题的方法
2019/07/05 Python
pandas对dataFrame中某一个列的数据进行处理的方法
2019/07/08 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
pycharm新建Vue项目的方法步骤(图文)
2020/03/04 Python
Python如何将装饰器定义为类
2020/07/30 Python
加拿大便宜的隐形眼镜商店：Clearly
2016/09/15 全球购物
阿迪达斯芬兰官方网站：adidas芬兰
2017/01/30 全球购物
护理毕业生自我鉴定
2014/02/11 职场文书
平面设计求职信
2014/03/10 职场文书
电子商务专业毕业生求职信
2014/06/12 职场文书
《火烧云》教学反思
2016/02/23 职场文书
解决Golang中goroutine执行速度的问题
2021/05/02 Golang
mysql5.7的安装及Navicate长久免费使用的实现过程
2021/11/17 MySQL
JavaScript实现优先级队列
2021/12/06 Javascript