HTML 点击文字弹出自适应居中弹窗代码示例

以下是一个在点击文字时弹出自适应居中的 div 弹窗的 HTML 代码：

<!DOCTYPE html>
<html>
<head>
<style>
/* 弹窗的样式 */
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #f1f1f1;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

/* 点击文字时显示弹窗 */
.show-popup {
  cursor: pointer;
}
</style>
</head>
<body>

<p class='show-popup' onclick='togglePopup()'>点击这里显示弹窗</p>

<div id='myPopup' class='popup'>
  <h3>弹窗内容</h3>
  <p>这是一个弹窗的示例内容。</p>
  <button onclick='togglePopup()'>关闭</button>
</div>

<script>
function togglePopup() {
  var popup = document.getElementById('myPopup');
  if (popup.style.display === 'none') {
    popup.style.display = 'block';
  } else {
    popup.style.display = 'none';
  }
}
</script>

</body>
</html>

在上述代码中，我们使用了一个名为 'popup' 的 CSS 类来定义弹窗的样式。弹窗的位置通过设置 position: fixed; 和使用 transform: translate(-50%, -50%); 来实现居中显示，即使宽度和高度不确定也能自适应居中。通过添加 display: none; 可以初始隐藏弹窗，并在点击文字时通过 JavaScript 的 togglePopup 函数切换显示/隐藏状态。

请注意，为了避免与现有的 'popup' 相关的 CSS 冲突，我们使用了一个不同的 CSS 类名 'popup' 来定义弹窗的样式。