<!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. 【转】七牛免费SSL证书，配置自定义域名CDN加速

    原文链接:https://excaliburhan.com/post/use-qiniu-ssl-and-cdn.html 申请七牛SSL证书 其实,七牛在很早之前就支持CDN使用https,但是他要 ...

  2. beta版验收互评

    排名 团队名称 项目名称 优点 缺点,bug 报告 1 别看了你没救了队 校园帮帮帮(已发布) 实现普通用户的登陆,修改个人信息,发布信息,下订单的功能:管理员登陆,修改个人信息,发布信息,下订单,增 ...

  3. VC6到VC2010，项目迁移错误

    错误信息: error C2440: “static_cast”: cannot from “BOOL (__thiscall CSelectRect::* )(void)” to “BOOL (__ ...

  4. VirtualBox 导入虚拟机时的注意事项 VDI 与VMDK

    1. 建议不要勾选  as vdi   vmdk 最好不过了.. 长个经验教训 以后尽量不勾选 vmdk 有很多工具能进行转换 vdi的 要麻烦一些.

  5. [工作相关] GS产品使用LInux下Oracle数据库以及ASM存储时的数据文件路径写法.

    1. 自从公司的GS5版本就已经支持Linux下的oracle数据库通过安装工具自动安装注册了, 只不过路径需要使用linux的命名规则, 如图: /home/oracle/ 注意 最后是有一个 斜线 ...

  6. springMVC 使用WebApplicationContext获取ApplicationContext对象

    主要用于从application中获取bean 1.applicationContext 在web.xml中使用listener配置 <context-param> <param-n ...

  7. delphi property read writer 如何使用

    type TMyClass = class(TObject) private FMyName: string; FMyAge: Integer; procedure SetAge(age: Integ ...

  8. linux系统下find命令的使用

    1.find /* -name erlang 当前目录下,查找名为erlang的文件和目录 find /* -name rabbitmq-server 当前目录下,查找名为 rabbitmq-serv ...

  9. Swagger2 配置

    1. 每个请求都需要换取key: @Bean public Docket createRestApi() { //添加head参数start ParameterBuilder appId = new ...

  10. BZOJ3261最大异或和——主席树

    题目描述 给定一个非负整数序列{a},初始长度为N. 有M个操作,有以下两种操作类型: 1.Ax:添加操作,表示在序列末尾添加一个数x,序列的长度N+1. 2.Qlrx:询问操作,你需要找到一个位置p ...