通過遮罩層實現浮層DIV登入的js代碼

來源:互聯網
上載者:User

 遮罩層實現浮層DIV登入的效果,想必很多的朋友都有遇到過吧,實現起來也是很簡單的,下面有個不錯的實現,大家可以感受下

這個就沒什麼好說的了。。直接上代碼啊!!  首先是HTML的代碼。其中包含了登入點擊按鈕以及一個簡陋的登入框。   代碼如下:<body> <div id="shade"></div> <div> <a onclick="login()" style="cursor:pointer">登入</a> </div> <br/> 什麼都沒有用。。。<br/><br/> 什麼都沒有用。。。<br/><br/> 什麼都沒有用。。。<br/><br/> 什麼都沒有用。。。<br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>  <div id="login" style="display: none; z-index:1025; position:absolute;"> <form method="post" action="user/login.html"> <table width="200"> <caption> 使用者登入 </caption> <tr> <td>使用者名稱:</td> <td><input type="text" name="userName" /></td> </tr> <tr> <td>密碼:</td> <td><input type="password" name="password" /></td> </tr> <tr> <td>驗證碼:</td> <td><img alt="" src="base/verify.html" onClick=""></td> </tr> <tr> <td><input type="submit" value="登入" /></td> <td><input type="button" value="取消" onClick="cancel()" /></td> </tr> </table> </form> </div> </body>  接著是JS指令碼代碼的實現  代碼如下:<script type="text/javascript"> function login(){ var shadeWidth = document.body.clientWidth + 30; var shadeHeight = document.body.clientHeight + 30; var shade = document.getElementById("shade"); shade.style.width = shadeWidth + "px"; shade.style.height = shadeHeight + "px"; shade.style.display = "block";  var loginDivWidth = 200; var loginDivHeight = 800;  var loginDiv = document.getElementById("login"); loginDiv.style.width = loginDivWidth + "px"; loginDiv.style.height = loginDivHeight + "px"; loginDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - loginDivHeight / 2) + "px"; loginDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - loginDivWidth / 2) + "px"; loginDiv.style.display = "block"; }  </script>  這裡只有顯示遮罩層以及登入框的代碼。至於隱藏的代碼也很簡單,就是將遮罩層(shade)的DIV塊以及登入框(login)的DIV塊的display屬性都設定成none應該就沒有什麼問題了。。  至此,一個簡單的通過遮罩層實現浮層DIV登入的功能就實現了。關於美工方面的工作就由大家自行解決了。   在這裡,有一個功能求助大家啊。。就是如何讓彈出的登入框的DIV塊跟隨捲軸移動呢??  我的實驗代碼如下。  代碼如下:function loginDivCenter (){ loginDiv.style.top = (document.body.scrollTop + document.body.clientHeight / 2 - loginDivHeight / 2) + "px"; loginDiv.style.left = (document.body.scrollLeft + document.body.clientWidth / 2 - loginDivWidth / 2) + "px"; }  function scall (){ loginDivCenter(); }  window.onscroll=scall; window.onresize=scall; window.onload=scall;  但是很不幸的是本人失敗了。。網上找了很多,但都不是符合要求的。大多是設定一個setInterval來實現。本人覺得這樣做並不理想啊。。。  求各路大神指教啊! 
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。