純js實現仿QQ郵箱彈出確認框

2024-05-06 16:19:00

字體：大中小

來源：轉載

供稿：網友

仿QQ郵箱的彈出層，彈出確認框，主要是用火狐的firebug把html和css扣了下來，沒有做封裝,就定義了一個拖動事件. 大家可以封裝自己的彈出窗，嘿嘿!

代碼非常簡單，這里就不多廢話了。

<!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="http://www.49028c.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="http://www.49028c.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="http://www.49028c.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="http://www.49028c.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>