<!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. CSS里Postion几个取值relative、absolute、static、fixed的区别和用法

    ---恢复内容开始--- static:静态定位,也是postion的默认值,没有定位,元素出现在正常的流中,忽略top\bottom\left\right或者z-index声明. relative: ...

  2. TCP报文格式详解

    TCP报文是TCP层传输的数据单元,也叫报文段. 1.端口号:用来标识同一台计算机的不同的应用进程. 1)源端口:源端口和IP地址的作用是标识报文的返回地址. 2)目的端口:端口指明接收方计算机上的应 ...

  3. Linux养成笔记

    教程来自慕课网@Tony老师的课程 Linux简介 Linux发展史 Andrew S. Tanenbaum为了给学生讲课,买了一个Unix操作系统,参考他开发了Minix,并开放代码作为大学研究,2 ...

  4. 『编程题全队』Beata阶段项目复审

    小组的名字和链接 优点 缺点,bug 报告(部分包括建议) 最终名次 想不出队名 1. 界面简洁大方2. 有搜索功能 1. 已经完成的活动缺了点提示界面2. 似乎界面有一点点卡顿目标实现:基本实现找到 ...

  5. liunx上安装MySQL一个非常简单的方法

    1.官网下载yum源 https://www.mysql.com/ 2.把yum源包上传到linux,安装. 执行命令安装 [root@bogon ~]# yum localinstall mysql ...

  6. ceph 搭建nginx负载3个对象网关

    nginx.conf user nginx; worker_processes auto; error_log /var/log/nginx/error.log; pid /run/nginx.pid ...

  7. BZOJ3589 动态树（树链剖分+容斥原理）

    显然容斥后转化为求树链的交.这个题非常良心的保证了查询的路径都是到祖先的,求交就很休闲了. #include<iostream> #include<cstdio> #inclu ...

  8. BZOJ4942 NOI2017整数（线段树）

    首先把每32位压成一个unsigned int(当然只要压起来能过就行).如果不考虑进/退位的话,每次只要将加/减上去的数拆成两部分直接单点修改就好了.那么考虑如何维护进/退位.可以发现进位的过程其实 ...

  9. JavaScript无法运行问题

    [出现问题] JavaScript代码在html页面可以正常运行,在js文件夹下无法正常运行 [解决方案] 根据网上查的和自己错误的原因总结下. 1.引用Js的路径不对 ../ 表示上一级目录开始 . ...

  10. JSP 和 Servlet 的工作原理和生命周期

    JSP的英文名叫Java Server Pages,翻译为中文是Java服务器页面的意思,其底层就是一个简化的Servlet设计,是由sum公司主导参与建立的一种动态网页技术标准.Servlet 就是 ...