用js实现一个div弹出图层

用js实现一个弹出图层，具体效果：

点击按钮后弹出图层，图层处于页面中间、带有阴影的圆角边框、图层中有input、提交按钮、关闭按钮、标题，弹出后背景页面不可点击、背景变灰。所有代码不分开、放在一个html中显示。

以下是一个简单的JavaScript代码示例：

!DOCTYPE html>
    
html>
    
head>
    
 title>
    弹出图层/title>
    
 style>

  .overlay {
    
   position: fixed;
    
   top: 0;
    
   left: 0;
    
   width: 100%;
    
   height: 100%;
    
   background-color: rgba(0, 0, 0, 0.5);
    
   z-index: 9999;
    
   display: none;

  }

  .popup {
    
   position: absolute;
    
   top: 50%;
    
   left: 50%;
    
   transform: translate(-50%, -50%);
    
   background-color: #fff;
    
   padding: 20px;
    
   border-radius: 10px;
    
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    
   text-align: center;

  }

  h2 {
    
   margin-top: 0;

  }

  input[type="text"] {
    
   padding: 10px;
    
   margin: 10px 0;
    
   border-radius: 5px;
    
   border: none;
    
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    
   width: 100%;
    
   box-sizing: border-box;

  }

  button {
    
   padding: 10px 20px;
    
   background-color: #1c7cd6;
    
   color: #fff;
    
   border: none;
    
   border-radius: 5px;
    
   cursor: pointer;

  }

  button:hover {
    
   background-color: #15549a;

  }

  .close {
    
   position: absolute;
    
   top: 10px;
    
   right: 10px;
    
   width: 20px;
    
   height: 20px;
    
   border-radius: 50%;
    
   background-color: #ccc;
    
   color: #fff;
    
   font-size: 14px;
    
   text-align: center;
    
   line-height: 20px;
    
   cursor: pointer;

  }

  .close:hover {
    
   background-color: #999;

  }
    
 /style>
    
/head>
    
body>
    
 button id="open-popup">
    打开弹出图层/button>
    
 div class="overlay" id="overlay">
    
  div class="popup">
    
   h2>
    弹出图层/h2>
    
   input type="text" placeholder="请输入内容">
    
   button>
    提交/button>
    
   div class="close" id="close-popup">
    ×/div>
    
  /div>
    
 /div>
    
 script>
    
  var openPopupButton = document.getElementById("open-popup");
    
  var closePopupButton = document.getElementById("close-popup");
    
  var overlay = document.getElementById("overlay");

  openPopupButton.onclick = function() {
    
   overlay.style.display = "block";
    
   document.body.style.overflow = "hidden";

  }

  closePopupButton.onclick = function() {
    
   overlay.style.display = "none";
    
   document.body.style.overflow = "auto";

  }
    
 /script>
    
/body>
    
/html>
    

该代码使用了CSS样式，包含一个按钮和一个弹出图层。单击按钮将调用JavaScript函数来显示图层，并将背景页面设为不可点击状态。关闭按钮也是通过JavaScript函数来实现的，当用户单击关闭按钮时，它将隐藏弹出框并将背景页面状态还原。如果想隐藏JS功能逻辑，可用JShaman对JS代码进行混淆加密，加密后的代码是密文状态，不可读、不可分析。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！