要實現的效果如下
點擊“登錄”按鈕后，彈出登錄小窗口，並且有遮罩層（這個名詞還是百度知道的，以前只知道效果，卻不知道名字）
在沒有點擊“登錄”按鈕之前登錄小窗口不顯示，點擊“登錄”按鈕后小窗口顯示，並且遮罩層籠罩整個頁面，使整個頁面的其他元素暫時失去行為。
遮罩層的實現：相對於body絕對定位，寬度和高度都和body相同，並且有一定的透明度，使得下面的元素能夠被看到。原先的元素的z-index為0，遮罩層的z-index在彈出登錄小窗口和原先元素的之間。
說的不是很清楚，還是看代碼吧！
<!DOCTYPE html> <html> <head> <title>js制作帶有遮罩彈出層實現登錄小窗口</title> <link type="text/css" rel="stylesheet" href="./css/reset.css" /> <script> window.onload = function(){ document.getElementById("btn_showlogin").onclick = shogMinLogin; document.getElementById("close_minilogin").onclick = closeLogin; document.getElementById("firstLine").onmousedown = moveLogin; /* 顯示登錄窗口 */ function shogMinLogin(){ var mini_login = document.getElementsByClassName("mini_login")[0]; var cover = document.getElementsByClassName("cover")[0]; mini_login.style.display = "block"; cover.style.display = "block"; mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px"; mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px"; } /* 關閉登錄窗口 */ function closeLogin(){ var mini_login = document.getElementsByClassName("mini_login")[0]; var cover = document.getElementsByClassName("cover")[0]; mini_login.style.display = "none"; cover.style.display = "none"; } /* 移動登錄窗口 */ function moveLogin(event){ var moveable = true; //獲取事件源 event = event ? event : window.event; var clientX = event.clientX; var clientY = event.clientY; var mini_login = document.getElementById("mini_login"); console.log(mini_login); var top = parseInt(mini_login.style.top); var left = parseInt(mini_login.style.left);//鼠標拖動 document.onmousemove = function(event){ if(moveable){ event = event ? event : window.event; var y = top + event.clientY - clientY; var x = left + event.clientX - clientX; if(x>0 && y>0){ mini_login.style.top = y + "px"; mini_login.style.left = x + "px"; } } } //鼠標彈起 document.onmouseup = function(){ moveable = false; } } }; </script> <style> /* 彈出 樣式 */ .mini_login{ display:none; position:absolute; z-index:2; background:white; } .mini_login .item{ width:320px; margin:0 auto; height:48px; line-height:48px; padding:0 20px; } /* 登錄窗第一行*/ .mini_login .firstLine{ color:#666; background:#f7f7f7; font-size:18px; font-weight:bold; cursor:move; } .mini_login .item .login_close{ display:inline-block; float:right; cursor:pointer; } .mini_login .item label{ font-size:14px; margin-right:15px; } .mini_login .item input{ display:inline-block; height:60%; width:70%; } /* 登錄按鈕 */ .mini_login .item a.btn_login{ display:block; margin:10px 10% 0; height:30px; line-height:30px; width:80%; background:#4490F7; color:white; font-size:16px; font-weight:bold; text-align:center; } /* 遮罩層樣式 */ .cover{ display:none; width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background-color:#000; opacity:0.3; } </style> </head> <body> <!-- 主體 --> <div class="main"> <a href="javascript:void(0)" class="btn_login" id="btn_showlogin">登錄框</a> </div> <!-- 彈出登錄小窗口 --> <div class="mini_login" id="mini_login"> <!-- 表單 --> <form action="" method="post"> <div class="item firstLine" id="firstLine"> <span class="login_title">我要登錄</span> <span class="login_close" id="close_minilogin">X</span> </div> <div class="item"> <label>用戶</label> <input type="text" name="uname" /> </div> <div class="item"> <label>密碼</label> <input type="password" name="upwd" /> </div> <div class="item"> <a href="javascript:void(0)" class="btn_login" onclick="">登錄</a> </div> </form> </div> <!-- 遮罩層 --> <div class="cover"></div> </body> </html>
顯示如下：
關於拖動小窗口的步驟：
鼠標在小窗口上按下 --> 拖動 --> 小窗口移動 --> 鼠標彈起 --> 小窗口停止移動
這分別代表幾個事件！
鼠標按下事件 onmouserdown
鼠標移動事件 onmousemove
鼠標彈起事件 onmouseup
document.onmousemove 事件表示 在文檔中鼠標移動就會觸發此事件。
看moveLogin函數的邏輯：
首先moveLogin函數被綁定在 id為firstLine元素 的onmousedown 事件上，就是當鼠標在firstLine元素上按下的時候，執行moveLogin函數；
然后moveLogin函數先聲明了moveable=true，表示可以拖動元素了，接着把document.onmousemove事件綁定函數了，即從此之后只要移動鼠標就是觸發此事件，執行函數內容，該函數先判斷moveable是否為true即是否可以拖動，是則拖動，否則什么也不做；
最后moveLogin函數在document.onmouserup 事件函數中將moveable改為false，表示拖動結束。要想再次拖動必須先觸發firstLine元素 的onmousedow 事件定義moveable=true