点击div实现弹出层效果

可以通过CSS和JavaScript实现点击div弹出层的效果，具体步骤如下：

HTML部分：

<div id="myDiv">Click me!</div>
<div class="overlay" id="overlay">
  <div class="popup" id="popup">
    <p>Hello, world!</p>
    <button id="close-btn">Close</button>
  </div>
</div>

CSS部分：

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

.popup {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
  padding: 20px;
}

JavaScript部分：

var myDiv = document.getElementById("myDiv");
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var closeBtn = document.getElementById("close-btn");

myDiv.onclick = function() {
  overlay.style.display = "block";
}

closeBtn.onclick = function() {
  overlay.style.display = "none";
}

这样，当点击myDiv元素时，就会弹出一个id为popup的元素，并在其中显示文字“Hello, world!”，同时覆盖整个页面的遮罩层会出现，点击遮罩层上的关闭按钮或遮罩层本身时弹窗会消失。