JS实现页面弹出登录框，点击页面后登录框消失

运用到事件冒泡的理论，用JS实现点击登录后弹出登录框，点击页面后登录框消失的效果

• 实现效果
• 理论基础
• 取消冒泡
• HTML
• CSS
• js

实现效果

理论基础

1.事件冒泡

事件冒泡 ：当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级，一直到window 。

2.举例说明

var div1 = document.getElementById("div1");
var div2 = document.getElementById("div2");
   div2.onclick = function(){alert(1);};
   div1.onclick = function(){alert(2);};
//html代码

 <div id="div1">

    <div id="div2"></div>
 </div>

设置两个父子关系的div
然后分别加了点击事件
当我们在div2里面点击的时候，发现弹出了一次1，接着又弹出了2，这说明点击的时候，不仅div2的事件被触发了，它的父级的点击事件也触发了，这种现象就叫做冒泡。点击了div1,自己父级的点击事件也会被触发。

取消冒泡

事件执行太快无法显示时需要取消冒泡

取消事件冒泡有两种方式：

1.标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可

5.非标准的IE方式:ev.cancelBubble=true; 这里的cancelBubble是 IE事件对象的属性，设为true就可以了

HTML

<!-- 登录框S -->
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <div class="login_box">
      <h1>点击弹出登录框</h1>
      <a href="javascript:;" class="register">注册</a>
      <a href="javascript:;" id="login">登录</a>
      <div id="mask"></div>
      <div id="show"></div>
    </div>
    <!-- 登录框E -->

CSS

/* 登录框S */
.login_box {
  margin-top: 200px;
}

.login_box a {
  cursor: pointer;
}

#mask {
  width: 100%;
  height: 100%;
  opacity: 0.4;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
}

#show {
  width: 300px;
  height: 300px;
  background-color: #fff;
  position: fixed;
  left: 50%;
  top: 50%;
  margin: -150px 0 0 -150px;
  display: none;
}

/* 登录框E */

js

// 登录框S
var login = document.getElementById("login");
var mask = document.getElementById("mask");
var show = document.getElementById("show");
login.onclick = function (event) {
  mask.style.display = "block";
  show.style.display = "block";
  //   阻止事件冒泡，才能正常显示，需要传入一个事件
  var event = event || window.event;
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
};
// 点击文档其他位置后可消失
document.onclick = function (event) {
  var event = event || window.event;
  var target = event.target;
  // 获取事件目标，若事件是show再让其消失
  if (target.id !== "show") {
    mask.style.display = "none";
    show.style.display = "none";
  }
};
// 登录框E