<!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 利用冒泡机制显示与隐藏模态框的更多相关文章

  1. 解析Javascript事件冒泡机制

    本资源引自: 解析Javascript事件冒泡机制 - 我的程序人生 - 博客频道 - CSDN.NET http://blog.csdn.net/luanlouis/article/details/ ...

  2. Js控制显示、隐藏文本框中的密码

    Js控制显示.隐藏文本框中的密码,也可称为是一款小型的JavaScript星号密码破解器,点击会显示出密码类型的文本框中的真实信息,再次点击则还原,程序 主要是获取HTML元素对象,然后强制更改元素属 ...

  3. Bootstrap手动打开隐藏模态框

    开发的时候遇到一个bug,关闭模态框后背景灰色图层依旧还在.原来是用错了隐藏模态框的代码. 正确的调用方式如下: $("#id").modal("show"); ...

  4. Javascript事件冒泡机制

    1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可以访问W3scho ...

  5. 解析Javascript事件冒泡机制(转) 本文转自:http://blog.csdn.net/luanlouis/article/details/23927347

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

  6. 解析Javascript事件冒泡机制(转)

    本文转自:http://blog.csdn.net/luanlouis/article/details/23927347 1. 事件 在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然 ...

  7. JavaScript控制页码的显示与隐藏

    前端页面开发分页显示功能时,一般都要求使用自定义的页码样式,直接用网上分页插件就比较麻烦了,这里记录一下工作中总结的一个比较简单通用的控制页码显示与隐藏的的js代码. 首先是使用时需要自己根据自己具体 ...

  8. javascript实现div的显示和隐藏

    http://www.cnblogs.com/oec2003/archive/2007/05/05/736492.html <html> <head> <meta htt ...

  9. 第十二篇 JavaScript(简称JS) 实现显示与隐藏

    JavaScript   JavaScript简称JS.JS是脚本语言,它是一种轻量级的编程语言,是可以插入HTML页面的编程代码,几乎所有现代浏览器都是支持的. 理论老师不行,我就抄袭手册上的一些关 ...

随机推荐

  1. CRM 数据查重

    2.8 小工具 · 纷享销客产品手册https://www.fxiaoke.com/mob/guide/crmdoc/src/2-8%E5%B0%8F%E5%B7%A5%E5%85%B7.html C ...

  2. Enterprise Integration Patterns

    https://camel.apache.org/enterprise-integration-patterns.html 企业集成模式,各种模式算法,挺棒的. https://camel.apach ...

  3. python 协程库gevent学习--gevent数据结构及实战(四)

    一不留神已经到第四部分了,这一部分继续总结数据结构和常用的gevent类,废话不多说继续. 1.Timeout错误类 晚上在调试调用第三方接口的时候,发现有些接口耗时非常多,觉得应该有个超时接口来限制 ...

  4. Delphi动态添加菜单

    unit Unit1; interface uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms ...

  5. LoadRunner12 Java Vuser API语法举例

    // 检查点 web.reg_find("Text=\"retCode\":\"0000\"",new String[]{"FAI ...

  6. 美国运营商推送假5G图标:用户当场蒙圈了

    面对5G大潮,大家都想“争当第一”.美国运营商AT&T想出奇招,打算玩一把“障眼法”. 据外媒报道,AT&T的用户从明年开始会在手机右上角看到“5G E”的图标.当然,这并不是他们的手 ...

  7. python系列-1 字符串操作

    1.去除空格   str.strip():删除字符串两边的指定字符,括号的写入指定字符,默认为空格 >>> a=' hello ' >>> b=a.strip() ...

  8. BZOJ2008 JSOI2010连通数(floyd+bitset)

    一直不明白为什么要用floyd求传递闭包,直接搜不是更快嘛……不过其实可以用bitset优化,方法也比较显然.bitset是真的神奇啊,好多01状态且转移相似的东西都可以用这个优化一下. #inclu ...

  9. Django前端获取后端数据之前端自定义函数

    在写网站的时候遇到了一个问题: Django在后端向前端传数据时,多数会使用dict字典来传送多个数据,但前端只能遍历,没有一个用key取到value值的方法可以直接使用 如果作为一个list传递到前 ...

  10. 创建首个 Android 项目

    Android 项目包括构成你的 Android 应用的源代码的所有文件. 利用 Android SDK 工具可以简单的创建 默认项目目录和文件来开始一个新的 Android 项目. 本节课展示了如何 ...