<div class="codetitle"> <span><a style="CURSOR: pointer" data="35863" class="copybut" id="copybut35863" onclick="doCopy('code35863')"><u>复制代码</u></a></span> 代码如下:</div> <div class="codebody" id="code35863"> <br><br><br><br> <title></title> <br> <script type="text/javascript"><BR> function showLogin() {<BR> var loginDiv = document.getElementById("loginDiv");<BR> var zhezhao = document.getElementById("zhezhao");<BR> var clientx = document.documentElement.clientWidth;<BR> var clienty = document.documentElement.clientHeight;<BR> var l_margin = (clientx - parseInt(loginDiv.style.width)) / 2;<BR> var t_margin = (clienty - parseInt(loginDiv.style.height)-200) / 2<BR> loginDiv.style.left = l_margin + "px";<BR> loginDiv.style.top = t_margin +"px";<BR> loginDiv.style.display = "block";<BR> zhezhao.style.display = "block";<BR> }<BR> function hidLogin() {<BR> var loginDiv = document.getElementById("loginDiv");<BR> var zhezhao = document.getElementById("zhezhao");<BR> loginDiv.style.display = "none";<BR> zhezhao.style.display = "none";<BR> }<BR> function titleMove() {<BR> var moveable = true;<BR> var loginDiv = document.getElementById("loginDiv");<BR> //以下变量提前设置好 var clientX = window.event.clientX;<BR> var clientY = window.event.clientY;<BR> var moveTop = parseInt(loginDiv.style.top);<BR> var moveLeft = parseInt(loginDiv.style.left);<BR> document.onmousemove = function MouseMove() {<BR> if (moveable) {<BR> var y = moveTop + window.event.clientY - clientY;<BR> var x = moveLeft + window.event.clientX - clientX;<BR> if (x > 0 && y > 0) {<BR> loginDiv.style.top = y + "px";<BR> loginDiv.style.left = x + "px";<BR> }<BR> }<BR> }<BR> document.onmouseup = function Mouseup() {<BR> moveable = false;<BR> }<BR> }<BR> </script><br><br><br><!--Main start z-index:0--><br><div id="Main" style="position:absolute;z-index:0;"> <br><a href="javascript:showLogin()">登陆</a><br> </div> <br><!--Main start z-index:0--><br><!--loginDiv start :z-index:2--><br><div id="loginDiv" style="background-color:white;width:300px;height:150px;border:1px solid blue;z-index:2;display:none;position:absolute;border-top:none"> <br> <div onmousedown="titleMove()" id="login_title" style="width:300px;height:25px;background-color:Blue;border:1px solid silver;border-left:none;border-right:none"> <br> <!--<img src="../images/close.jpg" style="max-width:90%" onclick="hidLogin()"/ alt="利用js实现遮罩以及弹出可移动登录窗口_javascript技巧" >--><br> <a href="javascript:hidLogin()" style="float:right;text-decoration:none;color:white;margin-right:2px;font-size:20px">×</a><br> </div> <br> <table style="clear:right;width:298px;height:115px;text-align:right;margin-top:10px;"> <br> <tr> <td>用户名：</td> <td><input type="text" style="width:180px;"></td> <td> </td> </tr> <br> <tr> <td>密码:</td> <td><input type="text" style="width:180px;"></td> <td> </td> </tr> <br> <tr> <td><br></td> <td></td> </tr> <br> </table> <br> </div> <br><!--loginDiv end :z-index:2--><br><!--zhezhao start: z-index:1--><br><div id="zhezhao" style="position:absolute;z-index:1;width:100%;height:100%;background-color:silver;display:none;opacity:.5;"> <br><!--zhezhao end--><br> </div> <br><br><br> </div> <br>【效果】<br><a href="http://images.cnitblog.com/blog/539789/201307/05192043-3594e818cdfe428a9fa12ccce867e9da.png"><img style="max-width:90%" title="image" border="0" alt="image" src="http://files.jb51.net/file_images/article/201307/201307080928172.png" style="max-width:90%" style="max-width:90%"></a>
