js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下
点击“登录”按钮后，弹出登录小窗口，并且有遮罩层（这个名词还是百度知道的，以前只知道效果，却不知道名字）
在没有点击“登录”按钮之前登录小窗口不显示，点击“登录”按钮后小窗口显示，并且遮罩层笼罩整个页面，使整个页面的其他元素暂时失去行为。
遮罩层的实现：相对于body绝对定位，宽度和高度都和body相同，并且有一定的透明度，使得下面的元素能够被看到。原先的元素的z-index为0，遮罩层的z-index在弹出登录小窗口和原先元素的之间。
说的不是很清楚，还是看代码吧！
<!DOCTYPE html>
<html>
<head>
<title>js制作带有遮罩弹出层实现登录小窗口</title>
<link type="text/css" rel="stylesheet" href="./css/reset.css" />
<script>
window.onload = function(){
document.getElementById("btn_showlogin").onclick = shogMinLogin;
document.getElementById("close_minilogin").onclick = closeLogin;
document.getElementById("firstLine").onmousedown = moveLogin;
/* 显示登录窗口 */
function shogMinLogin(){
var mini_login = document.getElementsByClassName("mini_login")[0];
var cover = document.getElementsByClassName("cover")[0];
mini_login.style.display = "block";
cover.style.display = "block"; mini_login.style.left = (document.body.scrollWidth - mini_login.scrollWidth) / 2 + "px";
mini_login.style.top = (document.body.scrollHeight - mini_login.scrollHeight) / 2 + "px";
} /* 关闭登录窗口 */
function closeLogin(){
var mini_login = document.getElementsByClassName("mini_login")[0];
var cover = document.getElementsByClassName("cover")[0];
mini_login.style.display = "none";
cover.style.display = "none";
} /* 移动登录窗口 */
function moveLogin(event){
var moveable = true; //获取事件源
event = event ? event : window.event;
var clientX = event.clientX;
var clientY = event.clientY; var mini_login = document.getElementById("mini_login");
console.log(mini_login);
var top = parseInt(mini_login.style.top);
var left = parseInt(mini_login.style.left);//鼠标拖动
document.onmousemove = function(event){
if(moveable){
event = event ? event : window.event;
var y = top + event.clientY - clientY;
var x = left + event.clientX - clientX;
if(x>0 && y>0){
mini_login.style.top = y + "px";
mini_login.style.left = x + "px";
}
}
}
//鼠标弹起
document.onmouseup = function(){
moveable = false;
}
}
};
</script> <style>
/* 弹出 样式 */
.mini_login{
display:none;
position:absolute;
z-index:2;
background:white;
}
.mini_login .item{
width:320px;
margin:0 auto;
height:48px;
line-height:48px;
padding:0 20px;
}
/* 登录窗第一行*/
.mini_login .firstLine{
color:#666;
background:#f7f7f7;
font-size:18px;
font-weight:bold;
cursor:move;
}
.mini_login .item .login_close{
display:inline-block;
float:right;
cursor:pointer;
} .mini_login .item label{
font-size:14px;
margin-right:15px;
}
.mini_login .item input{
display:inline-block;
height:60%;
width:70%;
}
/* 登录按钮 */
.mini_login .item a.btn_login{
display:block;
margin:10px 10% 0;
height:30px;
line-height:30px;
width:80%;
background:#4490F7;
color:white;
font-size:16px;
font-weight:bold;
text-align:center;
}
/* 遮罩层样式 */
.cover{
display:none;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:1;
background-color:#000;
opacity:0.3;
}
</style>
</head>
<body> <!-- 主体 -->
<div class="main">
<a href="javascript:void(0)" class="btn_login" id="btn_showlogin">登录框</a>
</div> <!-- 弹出登录小窗口 -->
<div class="mini_login" id="mini_login">
<!-- 表单 -->
<form action="" method="post">
<div class="item firstLine" id="firstLine">
<span class="login_title">我要登录</span>
<span class="login_close" id="close_minilogin">X</span>
</div>
<div class="item">
<label>用户</label>
<input type="text" name="uname" />
</div>
<div class="item">
<label>密码</label>
<input type="password" name="upwd" />
</div>
<div class="item">
<a href="javascript:void(0)" class="btn_login" onclick="">登录</a>
</div>
</form>
</div>
<!-- 遮罩层 -->
<div class="cover"></div> </body>
</html>
显示如下：
关于拖动小窗口的步骤：
鼠标在小窗口上按下 --> 拖动 --> 小窗口移动 --> 鼠标弹起 --> 小窗口停止移动
这分别代表几个事件！
鼠标按下事件 onmouserdown
鼠标移动事件 onmousemove
鼠标弹起事件 onmouseup
document.onmousemove 事件表示 在文档中鼠标移动就会触发此事件。
看moveLogin函数的逻辑：
首先moveLogin函数被绑定在 id为firstLine元素 的onmousedown 事件上，就是当鼠标在firstLine元素上按下的时候，执行moveLogin函数；
然后moveLogin函数先声明了moveable=true，表示可以拖动元素了，接着把document.onmousemove事件绑定函数了，即从此之后只要移动鼠标就是触发此事件，执行函数内容，该函数先判断moveable是否为true即是否可以拖动，是则拖动，否则什么也不做；
最后moveLogin函数在document.onmouserup 事件函数中将moveable改为false，表示拖动结束。要想再次拖动必须先触发firstLine元素 的onmousedow 事件定义moveable=true
js制作带有遮罩弹出层实现登录小窗口的更多相关文章
- Js实例——模态框弹出层
1.描述 百度登录就是一个模态框弹出层.思路分析:先将灰色大背景和登陆盒子设为不可见,利用JS将其动态加载可见. 2.代码 <!DOCTYPE html> <html> < ...
- 一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
- 火狐浏览器高度&制作简单万年历&弹出层
浏览器高度: FireFox中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...
- Web前端设计模式--制作漂亮的弹出层
设计场景: Ben最近在负责一个购书网站,在网站的首页上,有一个叫做“最新上架”的板块,板块的内容比较简单,只有书籍名称,作者姓名和上架时间(如图),当初设计的时候并i没有过于丰富的构思... 现在问 ...
- Layui关闭弹出层并刷新父窗口
先确保已经引入layui和jquery 再确保初始化layer弹出层 <script> layui.use(['form', 'layer'], function() { var form ...
- 原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版 弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
- jQuery制作信息提示弹出层插件【推荐】
给大家分享一款非常实用的弹窗提示窗口插件,包含多种模式.带有回执函数值的功能.1. [代码][JavaScript]代码 <script type="text/javascript& ...
- js,ajax,layer笔记(弹出层,在弹出一个弹框)
整体认识: 因为作用域的问题,js 在页面初次加载时已近加载好了,所以要有第二次弹窗的效果,必须得在第一次成功之后再次让他加载js 代码: /*shaun*/showdetailsPag: funct ...
- html 通用 遮罩弹出层 弹出后 支持跳转页面
//showMessage 提示的内容默认为空必填 buttonText:按钮显示的内容默认为"确定" 传入 "" 为默认 url:跳转链接 传入"& ...
随机推荐
- [整理]android中几种常见的尺寸
获取屏幕宽高尺寸的三种代码形式 在Android上,目前我知道的获取屏幕尺寸的方法有三种不同的代码形式 方法1.在Activity中最常见的调用方式 WindowManager windowManag ...
- CDT
Eclipse CDT 是 Eclipse 插件,它将把 Eclipse 转换为功能强大的 C/C++ IDE.
- AngularJS 'Controller As'用法
AngularJS 1.2版本中提供了Controller As语法,简单说就是可以在Controller中使用this来替代$scope,使得Controller更像一个传统的JS类,相对于$sco ...
- Enter直接登录
2.2 按Enter键调用登录按钮 [实例描述] 为了方便用户操作,在登录邮箱或论坛时,如果用户输入了用户名和密码,按Enter键时,都会自动调用登录按钮.本例学习如何实现此功能. [实现代码] & ...
- Aqua Data Studio中文乱码
使用Aqua Data Studio 查询数据时,如果表中的数据有中文时,会显示乱码,如下图: 解决方法很简单,只能更改字体即可,步骤如下: 更改字体后,显示的结果如下:
- JIT晚期(运行期)
在部分的商用虚拟机(Sun HotSpot.IBM J9)中,Java程序最初是通过解释器(Interpreter)进行解释执行的,当虚拟机发现某个方法或代码块的运行特别频繁时,就会把这些代码认定为& ...
- 阿里云SDK手册之java SDK
进行阿里云sdk开发的前提是已经购买阿里云的相关服务才能调用阿里的相关接口进行开发.最近公司在做云管控的项目,于是进行下摘录总结. 一. 环境准备 阿里云针对不同的开发语言提供不同的sdk,由于项目用 ...
- POJ3252 Round Numbers（不重复全排列）
题目问区间有多少个数字的二进制0的个数大于等于1的个数. 用数学方法求出0到n区间的合法个数,然后用类似数位DP的统计思想. 我大概是这么求的,确定前缀的0和1,然后后面就是若干个0和若干个1的不重复 ...
- Week，Month, Year 日期区间辅助类
我们在做一些业务系统的时候,经常会用到一些获取时间段的情况.比如要统计某一周.某月.某年 这样一些时间区间内的一些业务数据.这时候我们就需要获取当前时间段内的一些起止日期.这里分享一个通用的日期辅助类 ...
- 更新Android SDK之后Eclipse提示ADT版本过低的一个简易解决办法
首先说明一下发表这一篇博文的“历史原因”吧,因为在更新SDK之后,进入Eclipse设置Android SDK目录的时候,会突然说我的版本低什么的,尝试自己解决但失败之后,我在搜索引擎上找了很多中文的 ...