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:第一 ...
随机推荐
- pdf转为html查看pdf.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Instance Segmentation入门总结
前一阵子好忙啊,好久没更新了.最近正好挖了新坑,来更新下.因为之前是做检测的,而目前课题顺道偏到了instance segmentation,这篇文章简单梳理一下从检测.分割结果到instance s ...
- OAuth2.0 入门与进阶
一.基础知识 1.OAuth产生背景 很多网站.APP 弱化甚至没有搭建自己的账号体系,而是直接使用社会化登录的方式,这样不仅免去了用户注册账号的麻烦.还可以获取用户的好友关系来增强自身的社交功能. ...
- JDBC操作数据库的基本步骤：
JDBC操作数据库的基本步骤: 1)加载(注册)数据库驱动(到JVM). 2)建立(获取)数据库连接. 3)创建(获取)数据库操作对象. 4)定义操作的SQL语句. 5)执行数据库操作. 6)获取并操 ...
- C#实现Stream与byte[]之间的转换实例教程
一.二进制转换成图片 MemoryStream ms = new MemoryStream(bytes); ms.Position = ; Image img = Image.FromStream(m ...
- SQL Server ->> 生成代码把表字段从NULL改为NOT NULL
一般我们用SELECT .... INTO语句生成的表字段都是允许为NULL.而如果我们需要改成NOT NULL呢 select 'ALTER TABLE dbo.XXXXXXX ALTER COLU ...
- sudo cat > EOF权限问题
sudo bash -c 'cat << EOF > /etc/yum.repos.d/some-name.repo line1 line2 line3 EOF'
- Smokeping配置调整
smokeping两种邮件报警方式 一 .自带sendmail报警 修改这两句话to = 收件邮箱,多个逗号分隔from = smokealert@本机IP /usr/local/smokeping/ ...
- HTTPS科普（转）
为什么需要https HTTP是明文传输的,也就意味着,介于发送端.接收端中间的任意节点都可以知道你们传输的内容是什么.这些节点可能是路由器.代理等. 举个最常见的例子,用户登陆.用户输入账号,密码, ...
- RPMForge介绍及安装
网站RPMForge介绍,安装 http://wiki.centos.org/AdditionalResources/Repositories/RPMForge#head-f0c3ecee3dbb40 ...