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:第一 ...
随机推荐
- scss-比较运算符
与JavaScript类似,scss中也有比较运算符,下面就分别做一下介绍. 一.==相等和!=不相等运算符: 此运算符用来判断两个操作数是否相等. 特别说明: 上面两个运算符,支持类似于JavaSc ...
- ajax异步请求/同源策略/跨域传值
基本概念 Ajax 全称是异步的 JavaScript 和 XML . 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进 ...
- html+css定位篇
position absolute相对于父元素移动,不在父元素范围内时,可能和其他元素重叠 relative相对于初始位置来进行移动 fixed相对于浏览器进行定位,无论滑轮如何滚动,始终出现在浏览器 ...
- 纯CSS实现Tab切换标签效果代码
在线演示地址如下: http://demo.jb51.net/js/2015/css-tab-bq-style-cha-codes/ <!DOCTYPE html PUBLIC "-/ ...
- 使用canvas及js简单生成验证码方法
在很多时候都需要用到验证码,前端验证码需要知道Html5中的canvas知识点.验证码生成步骤是:1.生成一张画布canvas 2.生成随机数验证码 3.在画布中生成干扰线 4.把验证码文本填充到 ...
- Resharper F12下载dll源码
原作者:赵青青 原文链接:Visual Studio(VS) F12 查看DLL源代码 Dot Peek 今天在调试时,又有这个需求,想查看dll的源代码,我决定从dot peek这个程序入手去查找相 ...
- 文件上传fileupload文件接收
form表单提交数据到servlet后,使用fileupload进行接收. fileupload 是由 apache 的 commons 组件提供的上传组件.它最主要的工作就是帮我们解析 reques ...
- python ftp download with progressbar
i am a new one to learn Python. Try to download by FTP. search basic code from baidu. no one tells h ...
- 在科技圈不懂“机器学习”？那你就out了
当联网的终端设备越来越多时,产生的信息数据也将呈指数式增长,大型.复杂.增长快速的数据收集已经无处不在.而机器学习能够扩增这些数据的价值,并基于这些趋势提出更广泛的应用情境. 那么,被人们津津乐道的机 ...
- vue-cli run dev 和 run build 出现的问题（运行项目、打包项目）
前些天做项目,过程中遇到了一个比较奇怪的问题:npm run dev 和 npm run build 的时候,出现了错误,导致项目无法启动.打包无法成功.报了一堆错误: 错误展示: 找了一下解决方案, ...