<!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. VS2015生成64位dll文件
			
    导入自己的源文件,准备生成DLL文件.也可以自己创建. 右键项目,进入属性,修改Configuration Type 为 DLL. 修改为64位,Configureation Manager -> ...
    
			
    2. 
						
  2. vc6.0 通过ADO(udl)连接sql 2008
			
    转载声明:本文转自http://blog.sina.com.cn/s/blog_7328b9dd0100pkbw.html茗之的博客   首先声明:本文是针对vc与sql菜鸟的,高人请让路. 本文讲解 ...
    
			
    3. 
						
  3. STM32 DFU -- Device Firmware Upgrade
			
    DFU Class Requests Get Status The Host employs the DFU_GETSTATUS request to facilitate synchronizati ...
    
			
    4. 
						
  4. Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt)
			
    Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt) 作者: Desmond Chen,发布日期: 2014-05- ...
    
			
    5. 
						
  5. C++ 名称空间
			
    在程序中,只使用 using namespace std; 而不使用其他的名称空间,如using namespace boost; 这样的好处有: 1.可以避免不同名称空间中的名称冲突: 2.可以很清 ...
    
			
    6. 
						
  6. Android Studio初步使用教程
			
    今年的Google全球开发者大会虽然没有新的Android系统和设备,但是还是推出了一些不错的产品,Android Studio就是其中之一.这个基于Intellij IDEA开发的Android I ...
    
			
    7. 
						
  7. UML精粹学习 - 订单类结构图
			
    Order Class Diagram of Martin Fowler's UML Distilled
    
			
    8. 
						
  8. Codeforces Gym 100231L Intervals 数位DP
			
    Intervals 题目连接: http://codeforces.com/gym/100231/attachments Description Start with an integer, N0,  ...
    
			
    9. 
						
  9. Shadow Mapping 的原理与实践（一）
			
    早在上世纪七十年代末,Williams在他的“Casting Curved Shadows on Curved Surface”一文中提出了名为Shadow Map的阴影生成技术.之后,他人在此基础上 ...
    
			
    10. 
						
  10. 微信公共服务平台开发（.Net 的实现）6-------自定义菜单
			
    用户自定义菜单制作时,需要用到access_token,我们直接使用前面讲解的IsExistAccess_Token()函数.我理解的微信公共平台里面菜单分为button和sub_button,即菜单 ...
    
			
    11.