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:第一 ...
随机推荐
- javascript 权威指南
1.对象 1.1.序列话对象 JSON.stringify() 和 JSON.parse() 用来序列化和还原 javascript 对象. var o = {x:1, y:{z:[false,nul ...
- 创建 XMLHttpRequest 对象时IE的兼容问题解决办法
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象.如果支持,则创建 XMLHttpRequest 对象.如果不支持,则创建 ActiveXO ...
- wxpython 对话框
. 消息对话框(wx.MessageDialog) 消息对话框 与用户通信最基本的机制是wx.MessageDialog,它是一个简单的提示框. wx.MessageDialog可用作一个简单的OK框 ...
- 开通cnblogs博客
开通博客,准备记录学习和开发过程
- Android使用Fragment来实现TabHost的功能
http://www.cnblogs.com/tiantianbyconan/p/3360938.html 好了,到此为止,我们已经用Fragment实现了类似TabHost的功能了,下面来看下各个F ...
- sqlserver学习3---sql函数
一.SQL DML 和 DDL 可以把 SQL 分为两个部分:数据操作语言 (DML) 和 数据定义语言 (DDL). SQL (结构化查询语言)是用于执行查询的语法.但是 SQL 语言也包含用于更新 ...
- Oracle权限相关查询
Oracle权限相关查询着实视图有点多,记录下常用的语句,方便查询:1.查看所有用户: select * from dba_users; select * from all_users; sel ...
- Ajax 重构的步骤
Ajax重构大致可以分为以下3三个步骤. 一 创建一个单独的JS文件,名称为AjaxRequest.js,并且在该文件中编写重构Ajax 所需的代码具体代码如下:var net = new Objec ...
- oracle数据库中创建表空间和临时表空间，以及用户和密码以及设置密码永不过期
首先进入oracle用户,命令是: su - oracle sqlplus /nolog connect system/123456@ora11g 或者 [oracle@localhost ~]$ ...
- hdu1852 Beijing 2008
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=1852 题目大意: 求2008^n的所有因子和m对k取余,然后求2008^m对k取余. 解题思路: 首 ...