首页
所有分类
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 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
Aug 25 Javascript
jquery实现简单的二级导航下拉菜单效果
Sep 07 Javascript
Javascript中replace()小结
Sep 30 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
VueJS全面解析
Nov 10 Javascript
文件上传的几个示例分享【推荐】
Dec 16 Javascript
浅谈js中同名函数和同名变量的执行问题
Feb 12 Javascript
BootStrap的双日历时间控件使用
Jul 25 Javascript
js实现动态增加文件域表单功能
Oct 22 Javascript
在vue项目中封装echarts的步骤
Dec 25 Vue.js
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
Kotlin(1) redis(3) XDM(3) 验证表达式(1) Spring Security(2) maven(2) 动态权限(1) Android Gradle(1) AOP(2) 记事本(1)
You might like
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP 错误之引号中使用变量
2009/05/04 PHP
PHP daddslashes 使用方法介绍
2012/10/26 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
JQuery 写的个性导航菜单
2009/12/24 Javascript
jquery.messager.js插件导致页面抖动的解决方法
2013/07/14 Javascript
求数组最大最小值方法适用于任何数组
2013/08/16 Javascript
EasyUI闪屏EasyUI页面加载提示(原理+代码+效果图)
2016/02/21 Javascript
bootstrap如何让dropdown menu按钮式下拉框长度一致
2017/04/10 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
python通过ffmgep从视频中抽帧的方法
2018/12/05 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
html5 视频播放解决方案
2016/11/06 HTML / CSS
GEOX鞋美国官方网站：意大利会呼吸的鞋
2017/07/12 全球购物
英国可持续奢侈品包包品牌：Elvis & Kresse
2018/08/05 全球购物
美国羽绒床上用品第一品牌：Pacific Coast
2018/08/25 全球购物
专注澳大利亚特产和新西兰特产的澳洲中文网：0061澳洲制造
2019/03/24 全球购物
AutoShack.com加拿大：北美主要的汽车零部件零售商
2019/07/24 全球购物
金讯Java笔试题目
2013/06/18 面试题
金额转换，阿拉伯数字的金额转换成中国传统的形式如：（￥1011）－> （一千零一拾一元整）输出
2015/05/29 面试题
专科毕业生自我鉴定
2013/12/01 职场文书
母亲节演讲稿范文
2014/01/02 职场文书
演讲稿开场白
2014/01/13 职场文书
关于工资低的辞职信
2014/01/14 职场文书
学生拾金不昧表扬信
2014/01/21 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
转学证明范本
2015/06/19 职场文书
python如何正确使用yield
2021/05/21 Python
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS