实现弹窗触发图片的显隐控制：弹窗开启隐藏、关闭显示

核心需求 #

页面头部的触发图片，点击后唤起弹窗；弹窗处于打开状态时隐藏触发图片，弹窗关闭时重新显示该图片。

代码实现 #

HTML结构

<!-- 弹窗触发图片 -->
<img id="popupTrigger" src="your-image-path.jpg" alt="点击打开弹窗">

<!-- 弹窗容器 -->
<div id="popupModal" class="modal">
  <div class="modal-content">
    <!-- 关闭按钮 -->
    <span id="closeModal" class="close-btn">&times;</span>
    <!-- 弹窗内容区域 -->
    <div class="modal-body">
      <!-- 这里放置弹窗内容 -->
      <p>弹窗内容示例</p>
    </div>
  </div>
</div>

CSS样式

/* 触发图片样式 */
#popupTrigger {
  cursor: pointer;
  display: block; /* 默认显示 */
  /* 可根据需求添加尺寸、边距等样式 */
  width: 100px;
  height: auto;
}

/* 弹窗遮罩层 */
.modal {
  display: none; /* 默认隐藏 */
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 弹窗内容容器 */
.modal-content {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border-radius: 4px;
  width: 80%;
  max-width: 600px;
  position: relative;
}

/* 关闭按钮样式 */
.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #666;
}

.close-btn:hover {
  color: #000;
}

JavaScript交互逻辑

// 获取DOM元素
const triggerImg = document.getElementById('popupTrigger');
const modal = document.getElementById('popupModal');
const closeBtn = document.getElementById('closeModal');

// 点击触发图片：打开弹窗 + 隐藏图片
triggerImg.addEventListener('click', () => {
  modal.style.display = 'block';
  triggerImg.style.display = 'none';
});

// 点击关闭按钮：关闭弹窗 + 显示图片
closeBtn.addEventListener('click', () => {
  modal.style.display = 'none';
  triggerImg.style.display = 'block';
});

// 点击弹窗遮罩层：关闭弹窗 + 显示图片
window.addEventListener('click', (e) => {
  if (e.target === modal) {
    modal.style.display = 'none';
    triggerImg.style.display = 'block';
  }
});

关键说明 #

• 通过控制元素的display属性实现显示/隐藏切换
• 覆盖了三种关闭弹窗的场景：点击关闭按钮、点击遮罩层，确保触发图片在弹窗关闭时都会重新显示
• 可根据实际需求调整弹窗的样式、尺寸及触发图片的样式

内容的提问来源于stack exchange，提问作者Martin Abramov