js+点击弹窗放大

在JavaScript中实现点击弹窗放大的功能，通常涉及到DOM操作和事件处理。以下是一个基础的实现示例：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击弹窗放大示例</title>
<style>
  #popup {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* 默认隐藏 */
  }
</style>
</head>
<body>

<button id="openPopup">打开弹窗</button>
<div id="popup">点击我放大</div>

<script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.getElementById('openPopup').addEventListener('click', function() {
  var popup = document.getElementById('popup');
  popup.style.display = 'block'; // 显示弹窗
});

document.getElementById('popup').addEventListener('click', function() {
  this.style.transform = 'scale(2)'; // 放大弹窗
  this.style.transition = 'transform 0.3s'; // 添加过渡效果
});

解释

HTML部分：定义了一个按钮和一个弹窗（div元素）。弹窗默认是隐藏的。
CSS部分：设置了弹窗的基本样式，包括大小、背景颜色、位置等。
JavaScript部分：
- 当点击“打开弹窗”按钮时，显示弹窗。
- 当点击弹窗时，使用transform: scale(2)将弹窗放大两倍，并添加了一个0.3秒的过渡效果，使放大过程更加平滑。