假期結束，繼續學習！
拖動彈出框效果
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 *{margin:0;padding:0;}
8 .box{
9 width:400px;
10 height:300px;
11 border:5px solid #eee;
12 box-shadow:2px 2px 2px 2px #666;
13 position: absolute;
14 top:50%;
15 left:50%;
16 margin-top: -155px;
17 margin-left:-205px;
18
19 }
20 .hd{
21 width:100%;
22 height:25px;
23 background-color: #3B90CD;
24 border-bottom:1px solid #369;
25 line-height: 25px;
26 color:white;
27 cursor: move;
28 }
29 #box_close{
30 float: right;
31 cursor: pointer;
32 }
33 </style>
34 </head>
35 <body>
36 <div class="box" id="box">
37 <div class="hd" id="drop">注冊資訊 (可以拖拽)
38 <span id="box_close">【關閉】</span>
39 </div>
40 <div class="bd"></div>
41 </div>
42 </body>
43 </html>
44 <script>
45 var box = document.getElementById("box");
46 var drop = document.getElementById("drop");
47 startDrop(drop,box); // 滑鼠放到 drop 但是移動 是 box
48 function startDrop(current,move) {
49 current.onmousedown = function(event) {
50 var event = event || window.event;
51 var x = event.clientX - move.offsetLeft - 205; // 記錄目前盒子的x 位置
52 var y = event.clientY - move.offsetTop - 155; // // 記錄目前盒子的y位置
53 document.onmousemove = function(event) {
54 var event = event || window.event;
55 move.style.left = event.clientX - x + "px";
56 move.style.top = event.clientY - y + "px";
57 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
58 }
59
60 }
61 document.onmouseup = function() { // 滑鼠彈起之後， 滑鼠繼續移動不應該操作
62 document.onmousemove = null;
63 }
64 }
65
66 </script>
運作效果：
![模态框中再嵌套模态框，關閉第二個模态框時，會導緻第一個模态框的滾動條消失的情況[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)