javascript--自定义弹出登陆窗口（弹出窗）
web开发中浏览器对象封装了诸如prompt、alert、confirm等弹出框，但是有的弹出框并不能满足开发需要，需要我们自己定义弹出框，诸如用户登陆框、消息提示框等。本文利用弹出用户登陆框示例，对这部分知识做个小结。
示例需求：点击按钮，弹出登陆窗口，且该窗口可以拖拽，弹出窗口的同时，整个页面变成灰色半透明。
效果图如下：图1是起始页面，图2是点击“点击，弹出登陆框”按钮后页面，图3是登陆框自由拖动后页面。
图1 图2 图3
分析：
1.让整个页面变成灰色半透明，需要使用div对整个屏幕进行覆盖，这个div称为覆盖层。
2.点击按钮的时候，弹出登陆窗口和覆盖层，注意，登陆窗口的z-index应该最高。
3.点击关闭按钮的时候，隐藏登陆窗口和覆盖层。
4.实现登陆窗口的拖拽。（该功能在上节博文中有详细讲解）
重点关注：
①登陆窗口的position为absolute，牢记怎么让定位属性的盒子居中，这个需要用到数学知识，设置left：50%，然后给margin-left设置为盒子宽度一般的负数。以后在HTML+CSS标签博文中需要重点标记。
②盒子拖拽中，用到的事件对象的相关属性的浏览器兼容性问题。
③重点复习一下相对定位和绝对定位。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义登陆窗口</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
/* 弹出登陆框按钮 */
#login-header{
text-align: center;
height: 30px;
line-height: 30px;
}
#login-header a{
font-size: 24px;
text-decoration: none;
color: black;
} /* 登陆框主体 */
.login{
position: absolute;
width: 512px;
height: 284px;
z-index: 9999;
display: none;
background-color: white;
/* 这里要注意绝对定位的盒子怎么在屏幕显示居中 */
left: 50%;
margin-left: -256px;
margin-top: 142px;
border: 1px solid gray;
}
/* 登陆框标题 */
.login-title{
width: 100%;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 20px;
cursor: move;
}
.login-title span a{
text-decoration: none;
border: 1px solid gray;
font-size: 12px;
color: black;
border-radius: 20px;
width: 40px;
height: 40px;
background-color: #fff;
position: absolute;
top: -20px;
right: -20px;
} /* 登陆表单 */
.login-input{
margin: 20px 0px 30px 0px;
}
.login-input label{
float: left;
height: 35px;
line-height: 35px;
width: 90px;
padding-left: 10px;
text-align: right;
font-size: 14px;
}
.login-input input.list-input{
height: 35px;
line-height: 35px;
width: 350px;
text-indent: 5px;
}
/* 登陆框登陆按钮 */
.loginSubmit{
width: 260px;
height: 40px;
text-align: center;
border: 1px solid gray;
background-color: white;
margin-left: 120px; } /* 遮盖层 */
.bg{
background-color: #000;
width: 100%;
height: 100%;
top: 0px;
position: fixed;
opacity: 0.3;
-webkit-opacity: 0.3;
-moz-opacity: 0.3;
display: none;
}
</style>
</head>
<body>
<!-- 弹出登陆框按钮 -->
<div id="login-header">
<a id="adminBtn" href="javascript:void(0)">点击，弹出登陆框</a>
</div> <!-- 登陆框主体 -->
<div id="login" class="login">
<!-- 登陆框标题 -->
<div id="login-title" class="login-title">
登陆会员
<span><a id="closeBtn" href="javascript:void(0)">关闭</a></span>
</div>
<!-- 登陆框表单 -->
<div id="login-form">
<div class="login-input">
<label>登录名：</label>
<input type="text" placeholder="请输入登录名" class="list-input"/>
</div> <div class="login-input">
<label>密 码：</label>
<input type="password" placeholder="请输入密码" class="list-input"/>
</div>
</div>
<!-- 登陆框登陆按钮 -->
<input type="submit" id="loginSubmit" value="登陆会员" class="loginSubmit"/>
</div> <!-- 遮盖层 -->
<div id="bg" class="bg">sada</div> <!-- 插入JS代码 -->
<script type="text/javascript">
var login=document.getElementById('login');
var bg=document.getElementById('bg');
// 1.点击"点击，弹出登陆框",弹出登陆窗口和遮盖层
var adminBtn=document.getElementById('adminBtn');
adminBtn.onclick=function(){
login.style.display="block";
bg.style.display="block";
return false;
}
// 2.点击"关闭",隐藏登陆窗口和遮盖层
var closeBtn=document.getElementById('closeBtn');
closeBtn.onclick=function(){
login.style.display="none";
bg.style.display="none";
return false;
}
// 3.鼠标拖拽功能
var login_title=document.getElementById('login-title');
login_title.onmousedown=function(e){
e = e || window.event;
var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop); var boxX=login.offsetLeft;
var boxY=login.offsetTop; var mouse_in_boxX=x-boxX;
var mouse_in_boxY=y-boxY; document.onmousemove=function(e){
var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop); login.style.left=x-mouse_in_boxX+256+'px';
login.style.top=y-mouse_in_boxY-142+'px';
}
} login_title.onmouseup = function(){
document.onmousemove=null;
} </script>
</body>
</html>
javascript--自定义弹出登陆窗口（弹出窗）的更多相关文章
- JavaScript动态实现div窗口弹出&消失功能
先积累一个JavaScript动态实现div窗口弹出&消失功能 首先是index.jsp代码 <html> <head> <link rel="styl ...
- 解决弹出的窗口window.open会被浏览器阻止的问题（自定义open方法）
由于在使用window.open时,在很多情况下,弹出的窗口会被浏览器阻止,但若是使用a链接target='_blank',则不会,基于这一特点,自己封装了一个open方法: function ope ...
- QUI操作超时弹出登录窗口登录的处理方式
在使用QUI开发的业务系统中,如果长时间没操作,session过期后,再次操作系统超时会自动跳转到登陆页面,如果当前有一些操作没有保存,需要重新登录后再次填写信息,用户体验很不好! 为了避免超时后页面 ...
- JS设置弹出小窗口。
经常上网的朋友可能会到过这样一些网站,一进入首页立刻会弹出一个窗口,或者按一个连接或按钮弹出,通常在这个窗口里会显示一些注意事项.版权信息.警告.欢迎光顾之类的话或者作者想要特别提示的信息.其实制作这 ...
- JS 弹出模态窗口解决方案
最近在项目中使用弹出模态窗口,功能要求: (1)模态窗口选择项目 (2)支持选择返回事件处理 在IE中有showModalDialog 方法,可以很好的解决该问题,但是在Chrome中和FF中就有问题 ...
- 创建一个弹出DIV窗口
创建一个弹出DIV窗口 摘自: http://www.cnblogs.com/TivonStone/archive/2012/03/20/2407919.html 创建一个弹出DIV窗口可能是现在 ...
- ZH奶酪：Ionic中（弹出式窗口）的$ionicModal使用方法
Ionic中[弹出式窗口]有两种(如下图所示),$ionicModal和$ionicPopup; $ionicModal是完整的页面: $ionicPopup是(Dialog)对话框样式的,直接用Ja ...
- jquery效果 窗口弹出案例
效果 ①基本效果:show().hide().toggle() ②滑动 slideDown().slideUp().slideToggle() 划上:$("p").slideUp( ...
- js实现第一次打开网页弹出指定窗口（常用功能封装很好用）
js实现第一次打开网页弹出指定窗口(常用功能封装很好用) 一.总结 1.常用功能封装:之前封装的cookie的操作函数非常好用,我自己也可以这么搞 二.js实现第一次打开网页弹出指定窗口 练习1:第一 ...
随机推荐
- SharedPreferences的封装
android.content.SharedPreferences是一个接口,用来获取和修改持久化存储的数据.有三种获取系统中保存的持久化数据的方式: 1). public SharedPrefere ...
- raid管理
raid管理 使用工具命令 storcli64 查看磁盘状态 storcli64 /c0 show 注:现在磁盘状态为UGood状态,表示可以直接制作raid 若磁盘状态为JBOD,则制作raid时会 ...
- 检查SQL Server 2005的索引密度和碎片信息(转)
查询数据库中所有表的索引密度和碎片信息,以便为索引的重建和整理提供依据,也可以参考DBCC SHOWCONTIG,通常FRAGMENTATIOIN在30%以上建议重建,否则建议整理 SELECT i. ...
- 5.Zabbix 3.0案例
请查看我的有道云笔记: http://note.youdao.com/noteshare?id=15d986179cb65b45c5824e90995109ee&sub=D2E73572D97 ...
- rac环境修改除vip外的其他ip地址方法
官方参考文档(metalink):如何修改集群的公网信息(包括 VIP) (文档 ID 1674442.1) 同事在测试环境测试通过,使用如下方法.如果有疑问,请参照上述文档,写的很详细.1.停止相关 ...
- Orchard Core 文档翻译 （七）Contents
CMS Modules »Contents Contents (OrchardCore.Contents) 此模块提供内容管理服务. Liquid 您可以使用“content ”属性从liquid 视 ...
- delphi7 打开project/options 出错
出错提示:Access violation at address 0012F88F. Write of address 0012F88F.然后又提示一条:Access violation at add ...
- SAP S4CRM 1811 服务订单API介绍
Jerry在今年2月28日,SAP Customer Management for S/4HANA 1.0正式问世这个具有纪念意义的日子,同时发布了中英文版的博客进行介绍. 英文版发在SAP社区上,至 ...
- 解决Could not get lock /var/cache/apt/archives/lock
在ubuntu apt-get upgrade的时候,遇到: E: Could not get lock /var/cache/ apt/archives/lock - open (11 Resour ...
- ACM-ICPC (10/16) Codeforces Round #441 (Div. 2, by Moscow Team Olympiad)
A. Trip For Meal Winnie-the-Pooh likes honey very much! That is why he decided to visit his friends. ...