如何使用JS与CSS实现点击后在遮罩层打开随机视频、图片或链接

问题根因 #

• CSS选择器不匹配：你定义的.overlay是类选择器，但HTML中对应元素设置的是id="overlay"，id选择器需要用#overlay前缀，所以遮罩层样式完全未生效
• 功能逻辑缺失：遮罩层默认配置为display: none隐藏状态，没有触发显示的交互逻辑，且原有代码直接打开新标签页跳转，和「在遮罩层中加载内容」的需求不符

修复后完整代码 #

HTML代码

<!-- 触发遮罩层的点击按钮 -->
<button id="openOverlayBtn">点击打开随机内容</button>

<!-- 遮罩层容器 -->
<div id="overlay" class="overlay">
  <div class="overlay-content" id="overlayContent">
    <span class="close-btn" id="closeOverlay">×</span>
  </div>
</div>

<script>
// 可自行扩展图片、视频、链接类资源
const resourceList = [
  { type: 'link', url: '示例链接地址1', name: '示例站点1' },
  { type: 'image', url: '示例图片地址', name: '示例图片' },
  { type: 'link', url: '示例链接地址2', name: '示例站点2' },
  { type: 'video', url: '示例视频地址', name: '示例视频' }
]

const overlay = document.getElementById('overlay')
const overlayContent = document.getElementById('overlayContent')
const openBtn = document.getElementById('openOverlayBtn')
const closeBtn = document.getElementById('closeOverlay')

// 打开遮罩层并加载随机内容
function loadRandomResource() {
  const randomIndex = Math.floor(Math.random() * resourceList.length)
  const targetResource = resourceList[randomIndex]
  // 清空历史内容
  overlayContent.querySelector('.resource-wrap')?.remove()
  const resourceWrap = document.createElement('div')
  resourceWrap.className = 'resource-wrap'

  // 按资源类型渲染对应内容
  switch(targetResource.type) {
    case 'image':
      resourceWrap.innerHTML = `<img src="${targetResource.url}" alt="${targetResource.name}">`
      break
    case 'video':
      resourceWrap.innerHTML = `<video src="${targetResource.url}" controls autoplay muted></video>`
      break
    case 'link':
      resourceWrap.innerHTML = `<a href="${targetResource.url}" target="_blank">访问${targetResource.name}</a>`
      break
  }
  overlayContent.appendChild(resourceWrap)
  // 显示遮罩层
  overlay.style.display = 'block'
}

// 关闭遮罩层
function closeOverlay() {
  overlay.style.display = 'none'
}

// 绑定交互事件
openBtn.addEventListener('click', loadRandomResource)
closeBtn.addEventListener('click', closeOverlay)
// 点击遮罩层半透明区域关闭
overlay.addEventListener('click', (e) => {
  if(e.target === overlay) closeOverlay()
})
</script>

CSS代码

.overlay {
  position: fixed; 
  display: none; 
  width: 100%; 
  height: 100%; 
  inset: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999; 
  cursor: pointer;
}

.overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  padding: 30px 20px 20px;
  border-radius: 6px;
  cursor: default;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.close-btn {
  position: absolute;
  top: 5px;
  right: 12px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #666;
}

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

.resource-wrap img, .resource-wrap video {
  max-width: 100%;
  height: auto;
}

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