<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

     <head>

         <title>

         </title>

         <script type="text/javascript">

             function showLogin() {

                 var loginDiv = document.getElementById("loginDiv");

                 var zhezhao = document.getElementById("zhezhao");

                 var clientx = document.documentElement.clientWidth;

                 var clienty = document.documentElement.clientHeight;

                 var l_margin = (clientx - parseInt(loginDiv.style.width)) / 2;

                 var t_margin = (clienty - parseInt(loginDiv.style.height) - 200) / 2 loginDiv.style.left = l_margin + "px";

                 loginDiv.style.top = t_margin + "px";

                 loginDiv.style.display = "block";

                 zhezhao.style.display = "block";

             }

             function hidLogin() {

                 var loginDiv = document.getElementById("loginDiv");

                 var zhezhao = document.getElementById("zhezhao");

                 loginDiv.style.display = "none";

                 zhezhao.style.display = "none";

             }

             function titleMove() {

                 var moveable = true;

                 var loginDiv = document.getElementById("loginDiv"); //以下变量提前设置好  var clientX = window.event.clientX; var clientY = window.event.clientY; var moveTop = parseInt(loginDiv.style.top); var moveLeft = parseInt(loginDiv.style.left); document.onmousemove = function MouseMove() { if (moveable) { var y = moveTop + window.event.clientY - clientY; var x = moveLeft + window.event.clientX - clientX; if (x > 0 && y > 0) { loginDiv.style.top = y + "px"; loginDiv.style.left = x + "px"; } } } document.onmouseup = function Mouseup() { moveable = false; } } 

         </script>

     </head>

     <body>

         <!--Main start z-index:0-->

         <div id="Main" style="position:absolute;z-index:0;">

             <a href="javascript:showLogin()">

                 登陆

             </a>

         </div>

         <!--Main start z-index:0-->

         <!--loginDiv start :z-index:2-->

         <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">

             <div onmousedown="titleMove()" id="login_title" style="width:300px;height:25px;background-color:Blue;border:1px solid silver;border-left:none;border-right:none">

                 <!--<img src="../images/close.jpg" style="float:right" onclick="hidLogin()"/>

                 -->

                 <a href="javascript:hidLogin()" style="float:right;text-decoration:none;color:white;margin-right:2px;font-size:20px">

                     ×

                 </a>

             </div>

             <table style="clear:right;width:298px;height:115px;text-align:right;margin-top:10px;">

                 <tr>

                     <td>

                         用户名：

                     </td>

                     <td>

                         <input type="text" style="width:180px;" />

                     </td>

                     <td>

                         &nbsp;&nbsp;

                     </td>

                 </tr>

                 <tr>

                     <td>

                         密码:

                     </td>

                     <td>

                         <input type="text" style="width:180px;" />

                     </td>

                     <td>

                         &nbsp;&nbsp;

                     </td>

                 </tr>

                 <tr>

                     <td>

                         <br />

                     </td>

                     <td>

                     </td>

                 </tr>

             </table>

         </div>

         <!--loginDiv end :z-index:2-->

         <!--zhezhao start: z-index:1-->

         <div id="zhezhao" style="position:absolute;z-index:1;width:100%;height:100%;background-color:silver;display:none;opacity:.5;">

             <!--zhezhao end-->

         </div>

     </body>

 </html>
 













												


											
js实现遮罩以及弹出可移动登录窗口的更多相关文章
	

    
								
  1. [转]C# 安装时弹出设置服务登录窗口
		
    本文转自:http://blog.csdn.net/prince_jun/article/details/38435887 安装服务时系统不要弹出设置服务登录窗口:在程序中将serviceProces ...
    
		
    2. 
						
  2. C# 安装WindowsService时弹出设置服务登录窗口的解决方案
		
    使用SignalR实现消息推送,页面实时刷新,使用WindowsService作为SignalR的宿主,也就是作为一个消息服务器,在使用cmd命令安装的时候弹出设置服务登录的窗口,解决此问题的具体操作 ...
    
		
    3. 
						
  3. js制作带有遮罩弹出层实现登录小窗口
		
    要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
    
		
    4. 
						
  4. js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
		
    本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...
    
		
    5. 
						
  5. JS组件Bootstrap实现弹出框和提示框效果代码
		
    这篇文章主要介绍了JS组件Bootstrap实现弹出框和提示框效果代码,对弹出框和提示框感兴趣的小伙伴们可以参考一下 前言:对于Web开发人员,弹出框和提示框的使用肯定不会陌生,比如常见的表格新增和编 ...
    
		
    6. 
						
  6. JS点击按钮弹出窗口
		
    由于没有系统学习过JS,遇到一个需求:点击按钮,弹出一个独立的窗口. 在网上百度了一下,并没有找到满意的结果,最重要的是各种方法很复杂.最终,仔细研究了一下,原来只是需要只要一个简单的函数就能满足自己 ...
    
		
    7. 
						
  7. Bootstrap入门（二十九）JS插件6：弹出框
		
    Bootstrap入门(二十九)JS插件6:弹出框 加入小覆盖的内容,像在iPad上,用于存放非主要信息 弹出框是依赖于工具提示插件的,那它也和工具提示是一样的,是需要初始化才能够使用的 首先我们引入 ...
    
		
    8. 
						
  8. 基于js alert confirm样式弹出框
		
    基于js alert confirm样式弹出框.这是一款根据alert confirm优化样式的确认对话框代码. 在线预览   源码下载 实现的代码. html代码: <div id=" ...
    
		
    9. 
						
  9. Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）
		
    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. MySQL通配符过滤
			
    在WHERE后使用LIKE操作符能够进行通配符过滤: products表例如以下: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1eWluZ18xM ...
    
			
    2. 
						
  2. 【WebForm】ASP.NET 使用 uploadify  上传文件
			
    说明 ASP.NET中上传文件是很常见的一项功能,经常不用的话,可能会遗忘,为了,以后能方便的调用使用,在这里做个备份说明.最后,把做的简单的DEMO上传,方便看. 主要借鉴的这个博主的: Uploa ...
    
			
    3. 
						
  3. ICPC-CAMP day1 D.Around the world
			
    Around the world 题目连接: 无 Description 给你一个n*n的矩阵,然后a[i][j]表示i,j是否有一条边 然后让你构造一个序列,使得i到(i+1)%n这两个点之间最多经 ...
    
			
    4. 
						
  4. Codeforces Round #225 (Div. 1) C. Propagating tree dfs序+树状数组
			
    C. Propagating tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/383/p ...
    
			
    5. 
						
  5. Codeforces Round #308 (Div. 2) D. Vanya and Triangles 水题
			
    D. Vanya and Triangles Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55 ...
    
			
    6. 
						
  6. ProgressCircular
			
    https://github.com/eltld/ProgressCircular
    
			
    7. 
						
  7. mahout 运行Twenty Newsgroups Classification实例
			
    按照mahout官网https://cwiki.apache.org/confluence/display/MAHOUT/Twenty+Newsgroups的说法,我只用运行一条命令就可以完成这个算法 ...
    
			
    8. 
						
  8. Ambari源代码分析之总览
			
    一.基本概念: Resource:Ambari把能够被管理的资源的抽象为一个Resource实例,资源能够包括服务.组件.主机节点等,一个resource实例中包括了一系列该资源的属性: Proper ...
    
			
    9. 
						
  9. Java虚拟机工作原理具体解释
			
    一.类载入器 首先来看一下java程序的运行过程. 从这个框图非常easy大体上了解java程序工作原理.首先,你写好java代码,保存到硬盘其中.然后你在命令行中输入 javac YourClass ...
    
			
    10. 
						
  10. 删除sqlserver2008登录记录
			
    SQL Server Management Studio登陆窗口 清空这些多余的登陆名 删除SqlStudio.bin文件 WinXP: C:\Documents and Settings\用户文件夹 ...
    
			
    11.