原生js创建模态框（摘自：东窗凝残月 链接：https://www.cnblogs.com/dcncy/p/9076937.html）

Posted on 2018-05-29 17:32  安然格思  阅读(291)  评论(0)  编辑  收藏  举报 

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    #pageMask {
      visibility: hidden; //使pageMask元素不可见
      position: absolute; //定位pageMask元素
      left: 0px;          //定位pageMask元素
      top: 0px;           //定位pageMask元素
      width:100%;
      height:100%;
      text-align: center; //文本对其方式
      z-index: 1100;      //指定一个元素的堆叠顺序
      ">#333;//设置背景色
      opacity: 0.6;       //设置元素的透明度级别
    }
    #ModalBody{
      background: white;  //设置背景
      width: 50% !important;
      height: 50% !important;
      position:absolute;  //定位ModalBody元素
      left: 25%;
      top: 25%;
      z-index: 1101;      //指定元素的堆叠顺序
      border: 1px solid;  //边框1px的实线
      display: none;      //不可见
    }
    #closeModalBtn{
      position: static;   //静态定位的元素不会受到top,bottom,left,right影响
      margin-top: 5px;    //设置closeModalBtn元素的上部边距
      margin-right: 1%;   //右部边距
      float: right;       //右侧移动
      font-size: 14px;    //字体大小
      background: #ccc000;
      cursor: pointer;    //设置光标形态，pointer光标呈现为指示链接的指针（一只手）
    }
  </style>
</head>
<body>
<div class="content">
  <h1>Test Modal</h1>
  <div id="pageMask"></div>     <!--遮盖层-->
  <button class="showModalBtn" id="showModalBtn">Btn</button>
  <div>    <!--主页面-->
    Page Content...
  </div>
</div>

<div id="ModalBody">    <!--模态框-->
  <button id="closeModalBtn" style="display: none;">Close</button>
  <div>Test Modal Body...</div>
</div>

<script>
  window.onload = function(){
    expandIframe();
  }
  function expandIframe(){
    var mask = document.getElementById("pageMask");
    var modal = document.getElementById("ModalBody");
    var closeBtn = document.getElementById("closeModalBtn");
    var btn = document.getElementById("showModalBtn");    btn.onclick = function(){      modal.style.display = (modal.style.display == "block")? "none" : "block";      closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";      mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";    }    closeBtn.onclick = function(){      modal.style.display = (modal.style.display == "block")? "none" : "block";      closeBtn.style.display = (closeBtn.style.display == "block")? "none" : "block";      mask.style.visibility = (mask.style.visibility == "visible")? "hidden" : "visible";    }  }</script></body></html>