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:第一 ...
随机推荐
- 2018.10.23NOIP模拟赛解题报告
心路历程 预计得分:\(100 + 50 + (10 \sim 50)\) 实际得分:\(100 + 10 + 50\) 这可能是我打的最懵逼的一场考试没有之一.. T1两个小时才做出来也是醉了. T ...
- Scrum之初体验
一.前言 入职两个月,作为新人,没有参加过一次早晨的scrum会议. 最大的感触就是,有一天中午,带我的开发哥哥突然说产品今天下午提测,我突然就懵了. 这算是我体会的最大的团队中人没有参加scrum, ...
- 网易回合制游戏录像批量下载（失效 不是因为代码 是因为网易官方关闭了录像网站 ：P）
最近在访问网易大话西游2的录像专区时,发现页面还是很早之前的板式,网易的编辑并没有打算重新美化的打算,不由得内心一寒,结合之前好几个回合制游戏的倒闭,让很多人回顾都没办法回顾, 而且,很多人现在也没有 ...
- Linux c获取时间
linux c获得时间和设置时间 #include<time.h> //C语言的头文件 #include<stdio.h> //C语言的I/O void main() { ti ...
- FPGA----只读存储器（ROM）
ROM是一种重要的时序逻辑存储电路,它的逻辑功能是在地址信号的选择下,从指定存储单元中读取相应的数据.R0M只能进行数据的读取,而不能修改或写人新的数据,本节将以16×8的ROM为例, ...
- bind 详解
请看我的有道云笔记: http://note.youdao.com/noteshare?id=eaf4194473cf4294776fbc263ffe6b89&sub=5CB214C594E0 ...
- 从零开始Vue项目实战（三）-项目结构
目录结构 ├── README.md 项目介绍 ├── index.html 入口页面 ├── build 构建脚本目录 │ ├── build-server.js 运行本地构建服务器,可以访问构建后 ...
- 【洛谷5309】[Ynoi2012] D1T1（分块）
点此看题面 大致题意: 两种操作,区间求和,将形如\(ax+y\)的位置的元素值加\(z\). 分块 这种题目显然就是按照\(x\)与\(\sqrt n\)的大小关系来分块. 对于\(x>\sq ...
- PHP设计模式——适配器模式
<?php /** * 适配器模式 * 适配器模式是将某个对象的接口适配为另一个对象所期望的接口 * * 在需要转化一个对象的接口用于另一个对象时,最好实现适配器模式对象 */ class We ...
- 【转】不错的linux下通用的java程序启动脚本
虽然写起动shell的频率非常不高...但是每次要写都要对付一大堆的jar文件路径,新加jar包也必须要修改起动shell. 在网上找到一个挺好的通用shell脚本. 只需要修改一些配置变量,就可以用 ...