仿QQ邮箱的弹出层，弹出确认框

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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="//ku.shouce.ren/files/images/201601/56a3187ddadfc.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="//ku.shouce.ren/files/images/201601/56a3187e3c59c.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="//ku.shouce.ren/files/images/201601/56a3187ddadfc.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="//ku.shouce.ren/files/images/201601/56a3187e3c59c.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>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

仿QQ邮箱的弹出层，弹出确认框

分类

表格图层

描述

仿QQ邮箱的弹出层，弹出确认框，主要是用火狐的firebug把html和css扣了下来，没有做封装,就定义了一个拖动事件. 大家可以封装自己的弹出窗，嘿嘿！