<!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. C语言综述
			
    1.预处理指令:在变异之前执行的指令. 系统自带的文件用<>,自己写的文件用""; .h成为头文件,用来声明一些常用的函数,假如想使用这些函数,就必须包含这个头文件(注 ...
    
			
    2. 
						
  2. cdoj 题目简单分类
			
    如有错误请联系我,下面题的题解,除了傻逼题均可以在我blog中查找 1 傻逼题 3 傻逼题 4 傻逼题 15 dfs 24 傻逼题 25傻逼题 26 傻逼题 30 flyod 31 01背包 42 k ...
    
			
    3. 
						
  3. 车牌识别--S5PV210測试
			
    cortex-A8(S5PV210) Linux-3.9.7 arm-linux-gcc 4.5.1(FriendlyARM) 根文件系统:NFS 软浮点执行结果: [liujia@210]#./so ...
    
			
    4. 
						
  4. 【JavaScript】JavaScript回调函数
			
    什么是Javascript 回调函数? 函数和其他数据一样可以被赋值,删除,拷贝等,所以也可以把函数作为参数传入到另一个函数中. 这个函数就是所谓的回调函数   举例: //不带参数的case fun ...
    
			
    5. 
						
  5. Javascript加载执行问题探索
			
    转自:http://www.cnblogs.com/huangxincheng/archive/2011/12/04/2275988.html 前言 最近研究MongoDB数据库,无意间发现的好博客, ...
    
			
    6. 
						
  6. 云服务器 ECS Linux 修改编码格式
			
    https://help.aliyun.com/knowledge_detail/41424.html?spm=5176.7841174.2.19.Le8kvy 通常情况下,云服务器 ECS Linu ...
    
			
    7. 
						
  7. 精品教程--IOS零基础开发环境搭建
			
    下载源码 技术要点: 1. 启动XCODE开始开发 2. IOS项目文件结构分析 3. 添加视图label组件 4. 程序的入口以及启动流程 5. 源码详细的中文注释 ...... 详细介绍: 1.  ...
    
			
    8. 
						
  8. 向linux内核版本号添加字符/为何有时会自动添加“+”号
			
    转载:http://blog.csdn.net/adaptiver/article/details/7225980 1.   引子 编译2.6.35.7 kernel版本的时候发现,“2.6.35.7 ...
    
			
    9. 
						
  9. Asp.Net 之 MasterPage
			
    母版页是VS2005中新引入的一个概念,它很好地实现界面设计的模块化,并且实现实现了代码的重用.它就像婚纱影楼中的婚纱模板,同一个婚纱模板可以给不同的新人用,只要把他们的照片贴在已有的婚纱模板就可以形 ...
    
			
    10. 
						
  10. Json.Net学习.集合序列化.
			
    只要集合实现了IEnumable接口就可以进行序列化 Json序列化器为序列化及反序列化集合对象提供了良好的支持. ->Serializing 为了序列化一个集合---一个泛型的list,arr ...
    
			
    11.