DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> 通過遮罩層實現浮層DIV登錄的js代碼
通過遮罩層實現浮層DIV登錄的js代碼
編輯:JavaScript綜合知識     

 遮罩層實現浮層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來實現。本人覺得這樣做並不理想啊。。。    求各路大神指教啊! 
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved