javascript--自定義彈出登陸視窗（彈出窗）
阿新 • • 發佈：2019-01-14
web開發中瀏覽器物件封裝了諸如prompt、alert、confirm等彈出框，但是有的彈出框並不能滿足開發需要，需要我們自己定義彈出框，諸如使用者登陸框、訊息提示框等。本文利用彈出使用者登陸框示例，對這部分知識做個小結。
示例需求：點選按鈕，彈出登陸視窗，且該視窗可以拖拽，彈出視窗的同時，整個頁面變成灰色半透明。
效果圖如下：圖1是起始頁面，圖2是點選“點選，彈出登陸框”按鈕後頁面，圖3是登陸框自由拖動後頁面。
圖1 圖2 圖3
分析：
1.讓整個頁面變成灰色半透明，需要使用div對整個螢幕進行覆蓋，這個div稱為覆蓋層。
2.點選按鈕的時候，彈出登陸視窗和覆蓋層，注意，登陸視窗的z-index應該最高。
3.點選關閉按鈕的時候，隱藏登陸視窗和覆蓋層。
4.實現登陸視窗的拖拽。（該功能在上節博文中有詳細講解）
重點關注：
①登陸視窗的position為absolute，牢記怎麼讓定位屬性的盒子居中，這個需要用到數學知識，設定left：50%，然後給margin-left設定為盒子寬度一般的負數。以後在HTML+CSS標籤博文中需要重點標記。
②盒子拖拽中，用到的事件物件的相關屬性的瀏覽器相容性問題。
③重點複習一下相對定位和絕對定位。
程式碼如下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>自定義登陸視窗</title> 6<style type="text/css"> 7 *{ 8 margin: 0px; 9 padding: 0px; 10 } 11 /* 彈出登陸框按鈕 */ 12 #login-header{ 13 text-align: center; 14 height: 30px; 15 line-height: 30px; 16 } 17 #login-header a{ 18 font-size: 24px; 19 text-decoration: none; 20 color: black; 21 } 22 23 /* 登陸框主體 */ 24 .login{ 25 position: absolute; 26 width: 512px; 27 height: 284px; 28 z-index: 9999; 29 display: none; 30 background-color: white; 31 /* 這裡要注意絕對定位的盒子怎麼在螢幕顯示居中 */ 32 left: 50%; 33 margin-left: -256px; 34 margin-top: 142px; 35 border: 1px solid gray; 36 } 37 /* 登陸框標題 */ 38 .login-title{ 39 width: 100%; 40 height: 40px; 41 line-height: 40px; 42 text-align: center; 43 margin-bottom: 20px; 44 cursor: move; 45 } 46 .login-title span a{ 47 text-decoration: none; 48 border: 1px solid gray; 49 font-size: 12px; 50 color: black; 51 border-radius: 20px; 52 width: 40px; 53 height: 40px; 54 background-color: #fff; 55 position: absolute; 56 top: -20px; 57 right: -20px; 58 } 59 60 /* 登陸表單 */ 61 .login-input{ 62 margin: 20px 0px 30px 0px; 63 } 64 .login-input label{ 65 float: left; 66 height: 35px; 67 line-height: 35px; 68 width: 90px; 69 padding-left: 10px; 70 text-align: right; 71 font-size: 14px; 72 } 73 .login-input input.list-input{ 74 height: 35px; 75 line-height: 35px; 76 width: 350px; 77 text-indent: 5px; 78 } 79 /* 登陸框登陸按鈕 */ 80 .loginSubmit{ 81 width: 260px; 82 height: 40px; 83 text-align: center; 84 border: 1px solid gray; 85 background-color: white; 86 margin-left: 120px; 87 88 } 89 90 /* 遮蓋層 */ 91 .bg{ 92 background-color: #000; 93 width: 100%; 94 height: 100%; 95 top: 0px; 96 position: fixed; 97 opacity: 0.3; 98 -webkit-opacity: 0.3; 99 -moz-opacity: 0.3; 100 display: none; 101 } 102 </style> 103 </head> 104 <body> 105 <!-- 彈出登陸框按鈕 --> 106 <div id="login-header"> 107 <a id="adminBtn" href="javascript:void(0)">點選，彈出登陸框</a> 108 </div> 109 110 <!-- 登陸框主體 --> 111 <div id="login" class="login"> 112 <!-- 登陸框標題 --> 113 <div id="login-title" class="login-title"> 114 登陸會員 115 <span><a id="closeBtn" href="javascript:void(0)">關閉</a></span> 116 </div> 117 <!-- 登陸框表單 --> 118 <div id="login-form"> 119 <div class="login-input"> 120 <label>登入名：</label> 121 <input type="text" placeholder="請輸入登入名" class="list-input"/> 122 </div> 123 124 <div class="login-input"> 125 <label>密 碼：</label> 126 <input type="password" placeholder="請輸入密碼" class="list-input"/> 127 </div> 128 </div> 129 <!-- 登陸框登陸按鈕 --> 130 <input type="submit" id="loginSubmit" value="登陸會員" class="loginSubmit"/> 131 </div> 132 133 <!-- 遮蓋層 --> 134 <div id="bg" class="bg">sada</div> 135 136 137 <!-- 插入JS程式碼 --> 138 <script type="text/javascript"> 139 var login=document.getElementById('login'); 140 var bg=document.getElementById('bg'); 141 // 1.點選"點選，彈出登陸框",彈出登陸視窗和遮蓋層 142 var adminBtn=document.getElementById('adminBtn'); 143 adminBtn.onclick=function(){ 144 login.style.display="block"; 145 bg.style.display="block"; 146 return false; 147 } 148 // 2.點選"關閉",隱藏登陸視窗和遮蓋層 149 var closeBtn=document.getElementById('closeBtn'); 150 closeBtn.onclick=function(){ 151 login.style.display="none"; 152 bg.style.display="none"; 153 return false; 154 } 155 // 3.滑鼠拖拽功能 156 var login_title=document.getElementById('login-title'); 157 login_title.onmousedown=function(e){ 158 e = e || window.event; 159 var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft); 160 var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop); 161 162 var boxX=login.offsetLeft; 163 var boxY=login.offsetTop; 164 165 var mouse_in_boxX=x-boxX; 166 var mouse_in_boxY=y-boxY; 167 168 document.onmousemove=function(e){ 169 var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft); 170 var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop); 171 172 login.style.left=x-mouse_in_boxX+256+'px'; 173 login.style.top=y-mouse_in_boxY-142+'px'; 174 } 175 } 176 177 login_title.onmouseup = function(){ 178 document.onmousemove=null; 179 } 180 181 </script> 182 </body> 183 </html>