请求调整Modal适配视口尺寸并添加图片右上角二级Modal触发按钮

一、将Modal设置为视口宽高 #

修改.modal和.modal-content的CSS，移除多余内边距并设置视口占满属性：

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: black;
}

.modal-content {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fefefe;
  width: 100%;
  height: 100%;
  padding: 0;
}

说明：100vw/100vh确保Modal完全覆盖视口；将.modal-content改为绝对定位并铺满Modal，若内容需要滚动，可给.modal-content添加overflow: auto。

二、图片右上角添加按钮并实现第二个Modal #

1. HTML结构 #

给图片容器添加按钮，同时创建第二个Modal：

<div class="img-container">
  <img src="你的图片链接" alt="图片说明">
  <button class="img-btn">打开第二个Modal</button>
</div>

<div class="modal modal-second">
  <div class="modal-content">
    <span class="close close-second">&times;</span>
    <p>第二个Modal的内容</p>
  </div>
</div>

2. 按钮样式 #

让按钮固定在图片右上角：

.img-container {
  position: relative;
  display: inline-block;
}

.img-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
  padding: 6px 12px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.modal-second {
  z-index: 2; /* 层级高于第一个Modal */
}

3. JavaScript交互 #

实现按钮点击打开Modal和关闭逻辑：

// 获取元素
const imgBtns = document.querySelectorAll('.img-btn');
const secondModal = document.querySelector('.modal-second');
const closeSecond = document.querySelector('.close-second');

// 打开第二个Modal
imgBtns.forEach(btn => {
  btn.onclick = () => {
    secondModal.style.display = 'block';
  }
});

// 关闭第二个Modal
closeSecond.onclick = () => {
  secondModal.style.display = 'none';
}

// 点击背景关闭
window.onclick = (e) => {
  if (e.target === secondModal) {
    secondModal.style.display = 'none';
  }
}

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