<!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. (Alpha)Let's-版本测试报告

    测试中发现的Bug 我们在测试之前发布了新的版本Version1.1,发布新版本的同时也带来一些问题: 修复了上传图片画质问题的Bug 修复了搜索功能的部分Bug 增加了下拉刷新的功能 修复了部分界面 ...

  2. Linux添加目录到环境变量以及添加sublime到环境变量

    博主之前有过这种情况,就是在普通用户下su ls等命令还有效,可登陆进root用户之后这些常用的命令竟然失效了. 像这样 这问题其实很简单,但是对于不清楚环境变量的配置的同学来说也的确棘手,我之前就是 ...

  3. 第八章Jdk代理 cglib代理

    什么是代理模式 代理(Proxy)是一种设计模式,提供了对目标对象另外的访问方式;即通过代理对象访问目标对象.这样做的好处是:可以在目标对象实现的基础上,增强额外的功能操作,即扩展目标对象的功能. 这 ...

  4. SMBv1 is not installed by default in Windows 10 Fall Creators Update 2017 and Windows Server, Semi-annual Channel

    windows 10 rs3 release enable SMBv1 windows 10 rs3 release file sharing https://support.microsoft.co ...

  5. ExtJS Tab里放Grid高度自适应问题，官方Perfect方案。

    出处:http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/layout-browser/layouts/combination.js // ...

  6. Oracle 使用PDB 的情况下进行备份恢复的使用.

    1. 关于directory: pdb 需要在container 上面创建directory才可以使用 CDB里面创建的directory是会无反应. 在PDB 里面创建: cmd 之后运行 set ...

  7. Jquery ajax ajaxStart()和ajaxStop()加载前的优雅表现

    Jquery中当一个Ajax请求启动时,并且没有其他未完成的Ajax请求时,将调用ajaxStart()方法.同样,ajaxStop()方法则是在所有Ajax请求都完成时调用.这些方法的参数都是一个函 ...

  8. python逻辑回归 自动建模

    #-*- coding: utf-8 -*- #逻辑回归 自动建模 import numpy as np import pandas as pd from sklearn.linear_model i ...

  9. FreeBSD ZFS

    FreeBSD ZFS https://www.cnblogs.com/hadex/p/6068476.html 参考資料 http://docs.oracle.com/cd/E37934_01/ht ...

  10. windows 系统无法安装

    1. 提示windows 无法安装到这个磁盘,选中的磁盘具有MBR分区表. Windows cannot be installed to this disk.the selected disk has ...