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页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...
随机推荐
- PAT 1014 福尔摩斯的约会
https://pintia.cn/problem-sets/994805260223102976/problems/994805308755394560 大侦探福尔摩斯接到一张奇怪的字条:“我们约会 ...
- HDU 2043 密码
http://acm.hdu.edu.cn/showproblem.php?pid=2043 Problem Description 网上流传一句话:"常在网上飘啊,哪能不挨刀啊-" ...
- html 響應式web設計
RWD(響應式web設計)可以根據尺寸大小傳遞網頁,對於平板和移動設備是必須的. <html lang="en-US"> lang表示頁面的主要語言.http://ww ...
- Java和Spring邮件的发送
方法一: java发送电子邮件:这里以发送qq邮件为例: package test; import java.util.Properties; import javax.mail.Authentica ...
- [代码]--c#实现屏幕取词源码下载
最近公司有一个 项目需要实现类似于金山词霸,有道词典等的屏幕取词功能,准确来说是划词功能,网上搜了各种屏幕取词无外乎就两种: A.金山词霸组件法 B.Nhw32.dll法 百度搜到的重复内容真的太多了 ...
- C# 枚举值 （二） 多属性 操作
很多时候,我们的枚举值可能需要中英文, 那么可以使用下面的方法: 下面这个类,包含2部分. 1 BaseDescriptionAttribute特性的重载 2 枚举的操作类 EnumOperate n ...
- MT【216】韦达定理
设$n$为正整数,$a_1,a_2,\cdots,a_n;b_1,b_2,\cdots,b_n;A,B$都是正数, 满足$a_i\le b_i,a_i\le A,i=1,2,\cdots,n$ 且$\ ...
- 【POI每日题解 #7】TES-Intelligence Test
题目链接 这道题第一眼看去类比BANK-Cash Dispenser 不过1e6 * 1e6 = 1e12 分分钟MLE啊 想到优化 就yy到一种近似主席树的做法 来维护类似BANK的一堆序列 开 ...
- 洛谷P3085 [USACO13OPEN]阴和阳Yin and Yang（点分治，树上差分）
洛谷题目传送门 闲话 偶然翻到一道没有题解的淀粉质,想证明一下自己是真的弱 然而ZSYC(字符串组合)早就切了 然后证明成功了,WA到怀疑人生,只好借着ZSY的代码拍,拍了几万组就出来了... 思路 ...
- 05 Zabbix triggers--action--event
点击返回:自学Zabbix之路 点击返回:自学Zabbix4.0之路 点击返回:自学zabbix集锦 05 Zabbix triggers--action--event 动作action: 在配置好监 ...