javascript 利用冒泡机制显示与隐藏模态框
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,html {
height: 100%;
padding: 0;
margin: 0;
}
.mask {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
display: none;
background: rgba(0, 0, 0, 0.6);
}
.login {
width: 400px;
height: 300px;
cursor: pointer;
background-color: #fff;
margin: 200px auto;
}
</style>
</head>
<body>
<div class="mask">
<div class="login" id="login"></div>
</div>
<a href="#">注册</a>
<a href="#">登陆</a> <script src="animate.js" charset="utf-8"></script>
<script type="text/javascript">
var mask = document.getElementsByClassName("mask")[0];
var a = document.getElementsByTagName("a")[1]; a.onclick = function(event){
//显示模态框
show(mask);
//阻止冒泡
event = event || window.event;
if (event && event.stopPropagation) {
event.stopPropagation();
}else {
event.cancelBubble = true;
}
} document.onclick = function(event){
//获取点击按钮后传递过来的值。
event = event || window.event;
//兼容获取事件触动时，被传递过来的对象
var aaa = event.target ? event.target : event.srcElement;
//判断目标值的ID是否等于login，如果等于不隐藏盒子，否则隐藏盒子。
if (aaa.id !== "login") {
mask.style.display = "none";
}
}
</script> </body>
</html>
javascript 利用冒泡机制显示与隐藏模态框的更多相关文章
- 解析Javascript事件冒泡机制
本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...
- Js控制显示、隐藏文本框中的密码
Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...
- Bootstrap手动打开隐藏模态框
开发的时候遇到一个bug,关闭模态框后背景灰色图层依旧还在.原来是用错了隐藏模态框的代码. 正确的调用方式如下: $("#id").modal("show"); ...
- Javascript事件冒泡机制
1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...
- 解析Javascript事件冒泡机制(转) 本文转自：http://blog.csdn.net/luanlouis/article/details/23927347
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
- 解析Javascript事件冒泡机制(转)
本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...
- JavaScript控制页码的显示与隐藏
前端页面开发分页显示功能时,一般都要求使用自定义的页码样式,直接用网上分页插件就比较麻烦了,这里记录一下工作中总结的一个比较简单通用的控制页码显示与隐藏的的js代码. 首先是使用时需要自己根据自己具体 ...
- javascript实现div的显示和隐藏
http://www.cnblogs.com/oec2003/archive/2007/05/05/736492.html <html> <head> <meta htt ...
- 第十二篇 JavaScript(简称JS) 实现显示与隐藏
JavaScript JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...
随机推荐
- Sqlserver 系统视图简单说明
1. 查看系统视图的sql语句 select * from sys.system_views 2. 查看所有的 dynamic management 视图的sql select * from sys. ...
- centos7黑客帝国装逼
黑客帝国既视感 搜 cmatrix 然后放到本地解压缩 ,安装 yum install ncurses-devel./configure && make && make ...
- WebAssembly是什么？
现在的JavaScript代码要进行性能优化,通常使用一些常规手段,如:延迟执行.预处理.setTimeout等异步方式避免处理主线程,高大上一点的会使用WebWorker.即使对于WebWorker ...
- jvm学习三：自定义ClassLoader
第一节我们说过一句话:所有的Java虚拟机实现必须在每个类或接口被Java程序“ 首次主动使用”时才初始化他们 但类加载器却不是这样:类加载器不需要等到某个类“被首次主动使用”时才加载类 两句话的区别 ...
- Spring的各个jar包的作用介绍
spring4中各个jar包的介绍: Spring AOP:Spring的面向切面编程,提供AOP(面向切面编程)的实现 Spring Aspects:Spring提供的对AspectJ框架的整合Sp ...
- 洛谷 P4294 [WC2008]游览计划
题目链接 不是很会呢,但似乎抄了题解后有点明白了 sol:状态DP显然,其实是要构建一棵最小生成树一样的东西,我自己的理解(可能不是很对哦希望多多指教)f[x][y][zt]就是到x,y这个点,状态为 ...
- Nginx PREACCESS阶段 如何限制每个客户端每秒处理请求数
L:56 limit_req_zone $binary_remote_addr zone=one:10m rate=2r/m;#以用户IP作为key 开辟共享内存10M 并且限制每分钟2个请求 rat ...
- 【题解】N皇后
题目描述 相信大家都听过经典的“八皇后”问题吧?这个游戏要求在一个8×8的棋盘上放置8个皇后,使8个皇后互相不攻击(攻击的含义是有两个皇后在同一行或同一列或同一对角线上). 桐桐对这个游戏很感兴趣,也 ...
- BZOJ1906树上的蚂蚁&BZOJ3700发展城市——RMQ求LCA+树链的交
题目描述 众所周知,Hzwer学长是一名高富帅,他打算投入巨资发展一些小城市. Hzwer打算在城市中开N个宾馆,由于Hzwer非常壕,所以宾馆必须建在空中,但是这样就必须建立宾馆之间的连接通道.机智 ...
- BZOJ1131[POI2008]Sta——树形DP
题目描述 给出一个N个点的树,找出一个点来,以这个点为根的树时,所有点的深度之和最大 输入 给出一个数字N,代表有N个点.N<=1000000 下面N-1条边. 输出 输出你所找到的点,如果具有 ...