<!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. 在VS2012中使用GDI+
			
    首先说明,在VS的较高版本中,已经包含GDI+的SDK,不用再次下载,只需要使用前应用相应的头文件,添加些代码即可.但是VC6.0中,没有GDI+SDK,需要同志们下载才行. 步骤: 1.在stdaf ...
    
			
    2. 
						
  2. Codeforces Round #338 (Div. 2)  D. Multipliers 数论
			
    D. Multipliers 题目连接: http://codeforces.com/contest/615/problem/D Description Ayrat has number n, rep ...
    
			
    3. 
						
  3. 次表面散射(SubSurface Scattering) Shader 【转】
			
    原文 http://www.azure.com.cn/article.asp?id=231 用深度值近似模拟物体的厚度,厚度越小处透光越多. varying vec4 position;varying ...
    
			
    4. 
						
  4. CloudStack的VO在调用setRemoved方法抛异常的原因
			
    今天在开发中发现一个问题,本来想对一个VO对象的removed值赋值,然后去update一下这条记录,一个最简单的set方法,但是在调用时直接抛异常了. 1: public void setRemov ...
    
			
    5. 
						
  5. Unity3D中使用Leap Motion进行手势控制
			
    Leap Motion作为一款手势识别设备,相比于Kniect,长处在于准确度. 在我的毕业设计<场景漫游器>的开发中.Leap Motion的手势控制作为重要的一个环节.以此,谈谈开发中 ...
    
			
    6. 
						
  6. Java多线程:线程死锁
			
    发生死锁的原因通常是两个对象的锁相互等待造成的. 以下用一个实例来构造这样的情况: package basic.e_deadlock; import org.apache.log4j.Logger;  ...
    
			
    7. 
						
  7. TP复习17
			
    三大自动,自动创建,自动验证,自动完成
    
			
    8. 
						
  8. Android学习笔记之JSON数据解析
			
    转载:Android学习笔记44:JSON数据解析 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,为Web应用开发提供了一种 ...
    
			
    9. 
						
  9. win7系统中的声音图标不见了怎么办
			
    转载:http://jingyan.baidu.com/article/dca1fa6f815023f1a44052d6.html 我以前用的比较多的还是xp系统,对xp系统中的一些常见的操作还是很方 ...
    
			
    10. 
						
  10. C++ Traits技术
			
    要想深入的理解STL的迭代器.分配器等,就必须了解C++模板编程中的一个技巧——Traits. 1.问题的提出 C++的模板特性为泛型编程提供了支持.这样我们就可以编写更加通用的代码,而不必过分去关心 ...
    
			
    11.