如何在页面点击内容后直接在当前页面弹出一个小框

您可以使用HTML、CSS和JavaScript来在当前页面弹出一个小框。

HTML：

<div id="popup">
  <span id="close">&times;</span>
  <p>弹出内容</p>
</div>

<button id="popupBtn">点击弹出</button>

CSS：

#popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 200px;
  background-color: white;
  border: 1px solid black;
  z-index: 1;
}

#close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
}

#close:hover {
  color: red;
}

#popupBtn {
  margin-top: 30px;
}

JavaScript：

var popup = document.getElementById("popup");
var popupBtn = document.getElementById("popupBtn");
var close = document.getElementById("close");

popupBtn.onclick = function() {
  popup.style.display = "block";
}

close.onclick = function() {
  popup.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == popup) {
    popup.style.display = "none";
  }
}

在这个代码中，我们创建了一个弹出框，当点击按钮时会显示，点击叉号或空白处时会隐藏。这个弹出框的样式和位置可以根据自己的需求来调整。