明輝站中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

純js完成仿QQ郵箱彈出確認(rèn)框_Javascript圖文說(shuō)明教程_3聯(lián)

[摘要]仿QQ郵箱的彈出層,彈出確認(rèn)框,主要是用火狐的firebug把html和css扣了下來(lái),沒(méi)有做封裝,就定義了一個(gè)拖動(dòng)事件. 大家可以封裝自己的彈出窗,嘿嘿!代碼非常簡(jiǎn)單,這里就不多廢話了。?123...

  仿QQ郵箱的彈出層,彈出確認(rèn)框,主要是用火狐的firebug把html和css扣了下來(lái),沒(méi)有做封裝,就定義了一個(gè)拖動(dòng)事件. 大家可以封裝自己的彈出窗,嘿嘿!

  代碼非常簡(jiǎn)單,這里就不多廢話了。

  ?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
<!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 {
/**
* 注冊(cè)拖拽
* 需要傳入整個(gè)窗體id和標(biāo)題部分的id
*/
regist:function(winId,titleId) {
// 頁(yè)面頭部要加上:
// <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
// 不然會(huì)有問(wèn)題的
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.3lian.net/jscss/demoimg/201109/ico_closetip.gif">
</div>
</div>
<div id="titleId" class="editor_dialog_title">刪除確認(rèn)</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.3lian.net/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>徹底刪除后郵件將無(wú)法恢復(fù),您確定要?jiǎng)h除嗎?</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.3lian.net/jscss/demoimg/201109/ico_closetip.gif">
</div>
</div>
<div id="titleId2" class="editor_dialog_title">刪除確認(rèn)</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.3lian.net/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>徹底刪除
 
 
后郵件將無(wú)法恢復(fù),您確定要?jiǎng)h除嗎?</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>

  以上所述就是本文的全部?jī)?nèi)容了,希望大家能夠喜歡。


QQ郵箱一些細(xì)節(jié)方面做的很好,類如可以顯示發(fā)信進(jìn)度,還有隨節(jié)日更換的Logo等等。每次QQ郵箱的更新都會(huì)給人耳目一新的感覺(jué)。期待著QQ郵箱在未來(lái)能給QQ郵箱更多的驚喜。



相關(guān)軟件

騰訊視頻最新官方版

騰訊視頻官方版 | 45.34MB

騰訊視頻官方版

騰訊視頻是騰訊旗下的視頻播放產(chǎn)品,定位于中國(guó)最大在線視頻媒體平臺(tái),于2011年4月正式上線運(yùn)營(yíng)獨(dú)立域名的視頻網(wǎng)站,支持豐富內(nèi)容的在線點(diǎn)播及電視臺(tái)直播,提供列表管理..

愛(ài)奇藝視頻官方正式版

愛(ài)奇藝視頻官方正式版 | 35.10MB

愛(ài)奇藝視頻官方正式版

愛(ài)奇藝,原名奇藝,于2010年4月22日正式上線,2011年11月26日品牌升級(jí),啟動(dòng)“愛(ài)奇藝”品牌并推出全新標(biāo)志。愛(ài)奇藝創(chuàng)始人龔宇博士擔(dān)任CEO。...

暴風(fēng)影音最新版下載

暴風(fēng)影音最新版下載 | 50.3MB

暴風(fēng)影音最新版下載

暴風(fēng)影音播放的文件清晰,當(dāng)有文件不可播時(shí),右上角的“播”起到了切換視頻解碼器和音頻解碼器的功能,會(huì)切換視頻的最佳三種解碼方式,同時(shí),暴風(fēng)影音也是國(guó)人最喜愛(ài)的播放器之一...

QQ音樂(lè)官方正式版

QQ音樂(lè)官方正式版 | 24.2MB

QQ音樂(lè)官方正式版

QQ音樂(lè)是騰訊公司推出的網(wǎng)絡(luò)音樂(lè)平臺(tái),是中國(guó)互聯(lián)網(wǎng)領(lǐng)域領(lǐng)先的正版數(shù)字音樂(lè)服務(wù)的領(lǐng)先平臺(tái),有著個(gè)性明星主題:大咖裝,添星妝!...

酷狗音樂(lè)2018最新版下載

酷狗音樂(lè)2018下載 | 37MB

酷狗音樂(lè)2018最新版下載

酷狗是中國(guó)領(lǐng)先的數(shù)字音樂(lè)交互服務(wù)提供商,互聯(lián)網(wǎng)技術(shù)創(chuàng)新的領(lǐng)軍企業(yè),致力于為互聯(lián)網(wǎng)用戶和數(shù)字音樂(lè)產(chǎn)業(yè)發(fā)展提供最佳的解決方案...

酷我音樂(lè)官方版下載

酷我音樂(lè)下載 | 47.4MB

酷我音樂(lè)官方版下載

酷我音樂(lè)的界面簡(jiǎn)潔大方,淺藍(lán)色與橙色相間,符合大多數(shù)用戶的審美喜好。打開(kāi)酷我音樂(lè),上部菜單欄包括“我的”、“推薦”、“曲庫(kù)”、“視頻”...