<form id="hz9zz"></form>
  • <form id="hz9zz"></form>

      <nobr id="hz9zz"></nobr>

      <form id="hz9zz"></form>

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

      純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

      酷我音樂官方版下載

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

      日韩精品一区二区三区高清