渡一教育公开课web前端开发JavaScript精英课学习笔记（十六）JS实现弹出层

本文链接：https://blog.youkuaiyun.com/jingliuting/article/details/87389557

直播弹出层简单示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    p{
      font-size:20px;
    }
    #btnLogin{
      width:80px;
      height:40px;
      background:#f01400;
      margin:0 auto;
      display:block;
      border-style:none;
      /* outline: none; 取消选中时显示的框*/
      font-size:16px;
    }
    #mask{
      opacity:0.5;
      /* filter:alpha(opacity=75); 兼容IE8及以下*/
      background:#000;
      /* width:100%;
      height:1000px; */
      position:fixed;
      left:0px;
      top:0px;
      bottom:0px;
      right:0px;
      /* z-index:99; */
    }
    #login{
      position:fixed;
      top:30%;
      left:30%;
      z-index:100;
    }
    .loginCon{
      width:400px;
      height:200px;
      background:#fff;
      border:5px sold red;
    }
    #close{
      width:30px;
      height:30px;
      background:blue;
      position:absolute;
      right:10px;
      top:10px;
    }
  </style>
</head>
<body>
  <h1>js实现弹出层示例</h1>
  <!--button是行级块元素-->
  <button id="btnLogin">login</button>
  <!-- <div id="mask"></div>
  <div id="login">
    <div class="loginCon">
      <div id="close"></div>
    </div>
  </div> -->
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>7</p>
  <p>8</p>
  <p>9</p>
  <p>10</p>
  <script>
    function openNew(){
      var sHeight = document.documentElement.scrollHeight;
      var sWidth = document.documentElement.scrollWidth;
      var cHeight = document.documentElement.clientHeight;
      var cWidth = document.documentElement.clientWidth;
      var oMask = document.createElement('div');
      oMask.id = 'mask';
      oMask.style.height = sHeight + 'px';
      document.body.appendChild(oMask);
      var oLogin = document.createElement('div');
      oLogin.id = 'login';
      oLogin.innerHTML = "<div class='loginCon'><div id='close'>X</div></div>";
      document.body.appendChild(oLogin);

      //登录框居中
      var dHeight = oLogin.offsetHeight;
      var dWidth = oLogin.offsetWidth;
      oLogin.style.left = (cWidth - dWidth)/2 + 'px';
      oLogin.style.top = (cHeight - dHeight)/2 + 'px';

      var oClose = document.getElementById('close');
      oClose.onclick = function(){
        document.body.removeChild(oMask);
        document.body.removeChild(oLogin);
      }
    }

    var oBtn = document.getElementById("btnLogin");
    oBtn.onclick = function(){
      openNew();
    }
  </script>
</body>
</html>