六月婷婷综合激情-六月婷婷综合-六月婷婷在线观看-六月婷婷在线-亚洲黄色在线网站-亚洲黄色在线观看网站

明輝站中心:是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺!

純js完成仿QQ郵箱彈出確認框_Javascript圖文說明教程_3聯

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

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

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

  ?

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 {
/**
* 注冊拖拽
* 需要傳入整個窗體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.3lian.net/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.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>徹底刪除后郵件將無法恢復,您確定要刪除嗎?</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">刪除確認</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>徹底刪除
 
 
后郵件將無法恢復,您確定要刪除嗎?</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>

  以上所述就是本文的全部內容了,希望大家能夠喜歡。


QQ郵箱一些細節方面做的很好,類如可以顯示發信進度,還有隨節日更換的Logo等等。每次QQ郵箱的更新都會給人耳目一新的感覺。期待著QQ郵箱在未來能給QQ郵箱更多的驚喜。



相關軟件

騰訊視頻最新官方版

騰訊視頻官方版 | 45.34MB

騰訊視頻官方版

騰訊視頻是騰訊旗下的視頻播放產品,定位于中國最大在線視頻媒體平臺,于2011年4月正式上線運營獨立域名的視頻網站,支持豐富內容的在線點播及電視臺直播,提供列表管理..

愛奇藝視頻官方正式版

愛奇藝視頻官方正式版 | 35.10MB

愛奇藝視頻官方正式版

愛奇藝,原名奇藝,于2010年4月22日正式上線,2011年11月26日品牌升級,啟動“愛奇藝”品牌并推出全新標志。愛奇藝創始人龔宇博士擔任CEO。...

暴風影音最新版下載

暴風影音最新版下載 | 50.3MB

暴風影音最新版下載

暴風影音播放的文件清晰,當有文件不可播時,右上角的“播”起到了切換視頻解碼器和音頻解碼器的功能,會切換視頻的最佳三種解碼方式,同時,暴風影音也是國人最喜愛的播放器之一...

QQ音樂官方正式版

QQ音樂官方正式版 | 24.2MB

QQ音樂官方正式版

QQ音樂是騰訊公司推出的網絡音樂平臺,是中國互聯網領域領先的正版數字音樂服務的領先平臺,有著個性明星主題:大咖裝,添星妝!...

酷狗音樂2018最新版下載

酷狗音樂2018下載 | 37MB

酷狗音樂2018最新版下載

酷狗是中國領先的數字音樂交互服務提供商,互聯網技術創新的領軍企業,致力于為互聯網用戶和數字音樂產業發展提供最佳的解決方案...

酷我音樂官方版下載

酷我音樂下載 | 47.4MB

酷我音樂官方版下載

酷我音樂的界面簡潔大方,淺藍色與橙色相間,符合大多數用戶的審美喜好。打開酷我音樂,上部菜單欄包括“我的”、“推薦”、“曲庫”、“視頻”...

主站蜘蛛池模板: 日韩特级毛片免费观看视频 | 亚洲永久精品免费www52zcm男男 | 色妇色综合久久夜夜 | 三级在线观看国产 | 亚洲欧美另类综合 | 亚洲免费三级 | 日韩视频国产 | 中文字幕一区二区三区免费视频 | 一级黄色在线播放 | 青青草原免费在线视频 | 欧美性高清suv | 日本草草视频在线观看 | 污污的视频在线观看 | 四虎在线精品免费高清在线 | 最好韩国日本高清免费 | 青青草视频免费观看 | 青草社区在线观看 | 色噜噜在线播放 | 亚洲欧美日韩在线不卡 | 日韩永久免费视频 | 欧美一线天 | 伊人亚洲综合网成人 | 欧洲激情网站 | 天天影视色香欲 | 全部免费特黄特色大片视频 | 一级特级女人18毛片免费视频 | 日本天堂在线视频 | 色综合久久综合网观看 | 亚洲第一男人网站 | 亚洲va中文字幕无码 | 青青草免费公开视频 | 中日韩欧美视频 | 最好韩国日本高清免费 | 日韩高清在线日韩大片观看网址 | 欧美系列在线观看 | 武则天a级片 | 日本后进式猛烈xx00动态图 | 欧美爽爽网 | 正在播放一区二区 | 青青久久久 | 在线日韩视频 |