js带有遮罩的弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
js带有遮罩的弹窗的更多相关文章
- js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下 点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
- div 遮罩层 弹窗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
- JS框架_(Vue.js)带有星期日期的数字时钟
百度云盘 传送门 密码:tv1v 数字时钟效果: <!doctype html> <html> <head> <meta charset="utf- ...
- JS编写简单的弹窗插件(含有demo和源码)
最近项目做完了 事情不是很多,今天正好也在调休,所以趁着这个时间研究了一下简易的JS弹窗功能,当然网上这块插件非常多,本人也没有仔细看网上的插件源码 只是凭着日常使用过的弹窗插件有这么多功能 来实现自 ...
- js添加遮罩层
直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...
- 纯js制作遮罩层对话框 -- g皓皓
//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- js 实现遮罩某一部分
借用一下喜马拉雅的效果图,比较一下下面的遮罩层的高度: 我们可以看到它的遮罩层一直都是只遮住的下面.开始想着怎么用CSS实现,几经测试也没弄出来,如果正在看这篇文章的你,知道如何用CSS达 ...
- js实现页面局部弹窗打印
原文出自:http://www.haorooms.com/post/css3media 在网页中经常看到有打印功能,点击之后,只针对特定区域进行的打印.网上看了一下,大体上有2中实现方法,一种是用cs ...
随机推荐
- 转 Golang 入门 : 切片(slice)
https://www.jianshu.com/p/354fce23b4f0 切片(slice)是 Golang 中一种比较特殊的数据结构,这种数据结构更便于使用和管理数据集合.切片是围绕动态数组的概 ...
- ASimpleCache源码分析
ASimpleCache里只有一个JAVA文件——ACache.java,首先我用思维导图制作了ACache类的详细结构图: 通过分析官方给的demo来驱动源码分析吧 以字符串存储为例(官方给的dem ...
- [nginx]设置代理和静态资源目录
upstream disconf { server ; #tomcat服务器的地址 } server { listen ; #监听端口 server_name localhost; #域名 index ...
- datatable 用法
DataTable datainsert = dt.GetChanges(DataRowState.Added); DataTable datadelete = dt.GetChanges(DataR ...
- c++ qsort函数应用
C++ qsort在"iostream" c在头文件stdlib.h中,strcmp在string.h中.下列例子默认从小到大排序即(a>b返回>0),反之从小到大排序 ...
- SAS数据挖掘实战篇【三】
SAS数据挖掘实战篇[三] 从数据挖掘概念到SAS EM模块和大概的流程介绍完之后,下面的规划是[SAS关联规则案例][SAS聚类][SAS预测]三个案例的具体操作步骤,[SAS的可视化技术]和[SA ...
- 【AMAD】dramatiq -- Python3实现的一个快速的，可信赖的分布式任务处理库
简介 动机 作用 用法 热度分析 个人评分 简介 Python3实现的一个快速的,可信赖的分布式任务处理库. 动机 dramatq1的官网2写道: Dramatiq成为现实的主要原因是,我想要一个简单 ...
- acrobat xi pro 11 补丁激活
acrobat xi pro 11 是一款专门为Adobe Acrobat XI Pro 11制作的破解补丁,这款补丁可以免去软件的激活步骤,让用户可以永久免费使用这款软件.11是款功能强大的pdf设 ...
- 网页设计——HTML(3)布局基础
为什么要布局? 网页布局,也就是如何安排网页的内容. 一个好的网页布局能够使人眼前一亮,吸引流量. 本篇文章中我们不讨论相关的设计理论,我们只对布局所用到的HTML知识进行学习. 几种简单的布局方式 ...
- 【VS开发】OutputWnd自动滚动
最近在尝试VS2010中的各种新鲜插件,首先从最简单的输出窗口入手. VS2010向导中产生的输出窗口是通过CMainFrame中的COutputWnd类的对象m_wndOutput生成的.为了向输出 ...