<!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. numpy行转列

    >>> a = np.array([1, 2, 3]) >>> a = a.reshape(-1, 1) #-1表示任意行数,1表示1列 >>> ...

  2. 一种快速统计SQL Server每个表行数的方法

    转载自:http://www.cnblogs.com/kenyang/archive/2013/04/09/3011447.html 我们都知道用聚合函数count()可以统计表的行数.如果需要统计数 ...

  3. MyBatis自动生成Java/C#的Bean（Entity）的等价MYSQL实现函数

    这是单元测试代码:TESTTITLECASE.sql SELECT TITLECASE('ABC_DEF_hgk') as BEANNAME FROM DUAL; SELECT TITLECASE(' ...

  4. Web接口测试-HttpClient

    要实现Web接口测试的自动化有许多方式,比如利用Jmeter.Loadrunner等测试工具都能够实现接口的自动化测试,我们也可以利用一些开源的框架来实现接口的自动化测试,比如我们现在要说的这个Htt ...

  5. 查询数据SELECT 之单表查询

    一.单表查询的语法与关键字的执行优先级""" # 单表查询# 单标查询完整与法:# select distinct(关键字,代表查询的意思,后面跟)字段1,字段2...( ...

  6. html 头部 head

    head里面包含标签有: title:html名称,每个html文档都必须有 形式:<title>名字</title>,文档区不显示,浏览器可以识别: 浏览器工具栏显示的页面标 ...

  7. Java之List使用方法

    package basic; import java.util.ArrayList; import java.util.Arrays; import java.util.Iterator; impor ...

  8. python之tkinter使用举例-Button

    tkinter用于编写GUI界面,python3默认已经包含,直接使用. # GUI:tkinter使用举例 import tkinter # 实例化tkinter对象 top = tkinter.T ...

  9. Bootstrap学习目录

    前面的话 Bootstrap与CSS的关系,类似于javascript与jQuery的关系,原理与应用的关系.只是jQuery不再火爆,而Bootstrap依然火热,它在github有着超过100万的 ...

  10. python中json.load()、json.loads()、json.dump()、json.dumps()的区别

    json.load()从文件中读取json字符串 json.loads()将json字符串转换为字典类型 json.dumps()将python中的字典类型转换为字符串类型 json.dump()将j ...