<!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. Windows API 磁盘
			
    这里的磁盘就是你的C,D,E,F,G盘啦 那么来看看吧windows Api来获取信息的呢 (1)DWORD GetLogicalDrives(void) 返回值是一个32位整形 32位每一位表示一个 ...
    
			
    2. 
						
  2. rails中的语法
			
    1. erb文件中的语法说明 erb文件中常混合使用Ruby语言和html语言,以下为两种常见的格式 <% 写逻辑脚本(Ruby语法) %> <%= 直接输出变量值或运算结果 %&g ...
    
			
    3. 
						
  3. Codeforces Gym 100015C City Driving  离线LCA
			
    City Driving 题目连接: http://codeforces.com/gym/100015/attachments Description You recently started fre ...
    
			
    4. 
						
  4. Codeforces Round #335 (Div. 1) C. Freelancer's Dreams 计算几何
			
    C. Freelancer's Dreams Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://www.codeforces.com/contes ...
    
			
    5. 
						
  5. CustomProgressBar
			
    https://github.com/eltld/CustomProgressBar-master
    
			
    6. 
						
  6. 【JavaScript】JavaScript Promise 探微
			
    http://www.html-js.com/article/Promise-translation-JavaScript-Promise-devil-details 原文链接:JavaScript  ...
    
			
    7. 
						
  7. 专注网格剖分 - TetGen
			
    提要 记得大三那一年有一门课叫做高等有限元,最后的作业就是网格剖分算法的实现,我和同学一起花了些时间做了一个Qt程序,他写算法,我写界面,最后成绩竟然出奇的拿了90多... 今天要介绍的这款软件Tet ...
    
			
    8. 
						
  8. oracle db打one-off-patch 一例
			
    由于EBS form界面有一个报错,是一个小bug,以下打一个小patch修补一下. [以下的过程没有停库] 解压p8496830_111070_Linux-x86-64.zip cd 8496830 ...
    
			
    9. 
						
  9. J​a​v​a​S​c​r​i​p​t​针​对​D​o​m​相​关​的​优​化​心​得
			
    JavaScript针对Dom相关的优化心得 组内同时总结的关于javascript性能优化注意些节.记录一下. 1. 批量增加 Dom 尽量使用修改 innerHTML 的方式而不是用 append ...
    
			
    10. 
						
  10. Viewport解决分辨率适配问题
			
    Viewport :   字面意思为视图窗口,在移动 web 开发中使用.表示将设备浏览器宽度虚拟成一个特定的值(或计算得出),这样利于移动 web 站点跨设备显示效果基本一致.   基本写法: &l ...
    
			
    11.