<!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. HDOJ2041_超级楼梯（斐波拉契数列）

    正常简单题:通过仔细观察推断即可看出这是一个斐波拉契数列的题目. HDOJ2041_超级楼梯 在做这题的时候我误入了思维盲区,只想着什么方法可以解决,没有看出是斐波拉契数列.因此第一次用组合数方法打了 ...

  2. ThinkPad E470 win10，重装win10专业版后无声音

    解决办法: 1.官网下载笔记本对应的声卡驱动并安装 2.下载热键驱动并安装 3.重启笔记本即可 参考:https://blog.csdn.net/u012369373/article/details/ ...

  3. [转帖]linux 内存管理——内核的shmall 和shmmax 参数

    (转)linux 内存管理——内核的shmall 和shmmax 参数   内核的 shmall 和 shmmax 参数 SHMMAX= 配置了最大的内存segment的大小 ------>这个 ...

  4. C# 之抽象类和抽象方法

    概述:abstract 关键字  抽象类不能被实例化,抽象方法不能有方法体,抽象类中的所有抽象方法必须在子类中重写(override ),一个抽象类可以同时包含抽象方法和非抽象方法. abstract ...

  5. 详细且透彻的分析PCA原理

    前两天面试问到了PCA,感觉讲得不是很透彻,这里再次详细写一下. 首先定义如下变量的含义: X:Rn*m,n个样本m个属性,对于第i个样本xi:R1*m. W:Rm*k,k个正交的单位正交的列向量组成 ...

  6. maven dependcymanage作用在父类里面定义依赖包 子类不会自动继承需要主动使用 这样解决了父类引用任意包 子类就会引用的问题

    maven dependcymanage作用在父类里面定义依赖包 子类不会自动继承需要主动使用 这样解决了父类引用任意包 子类就会引用的问题  子类在引用时候 不需要加上版本号

  7. python系列-3 pyenv的使用

    安装: git clone https://github.com/yyuu/pyenv.git ~/.pyenv echo 'export PYENV_ROOT="$HOME/.pyenv& ...

  8. ansible系列2-常用命令

    copyansible oldboy -m copy -a "src=/etc/hosts dest=/tmp/ mode=0600 owner=oldboy group=oldboy &q ...

  9. BZOJ1906树上的蚂蚁&BZOJ3700发展城市——RMQ求LCA+树链的交

    题目描述 众所周知,Hzwer学长是一名高富帅,他打算投入巨资发展一些小城市. Hzwer打算在城市中开N个宾馆,由于Hzwer非常壕,所以宾馆必须建在空中,但是这样就必须建立宾馆之间的连接通道.机智 ...

  10. BZOJ2120&2453数颜色——线段树套平衡树(treap)+set/带修改莫队

    题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...