如何实现第二个弹窗正常显示并与第一个弹窗按钮并排？

问题分析 #

1. 第二个按钮显示异常：第二个按钮所在的 .picsims 元素不在网格容器 .photo-gallery 内，无法与第一个按钮并排；且未设置与 .pic 一致的样式，初始状态布局异常。
2. 弹窗功能失效：原 togglePopup 函数仅控制 popup-1，未支持第二个弹窗；第二个弹窗使用的 .popup2 等自定义类无对应CSS样式，无法正常显示。

修正方案 #

1. 调整HTML结构 #

将第二个按钮容器移入 .photo-gallery 网格，统一使用 .pic 类确保布局一致：

<div class="photo-gallery">
  <!-- 第一个弹窗按钮 -->
  <div class="pic website">
    <button onclick="togglePopup('popup-1')"><img src="https://i.ibb.co/W5RWrch/Screenshot-2024-12-24-194906.png" alt="Button Image"></button>
  </div>
  <!-- 第二个弹窗按钮 -->
  <div class="pic sims">
    <button onclick="togglePopup('popup-2')"><img src="https://i.ibb.co/W5RWrch/Screenshot-2024-12-24-194906.png" alt="sims-button"></button>
  </div>
</div>

<!-- 第一个弹窗 -->
<div class="popup" id="popup-1">
  <div class="overlay"></div>
  <div class="content">
    <div class="close-btn" onclick="togglePopup('popup-1')">&times;</div>
    <div class="header">
      <h1 style="font-size:50px;">This Website</h1>
    </div>
    <div class="tldr">
      <p style="font-size:25px;"><br>TL:DR:</p>
    </div>
    <div class="popup-top">
      <p style="font-size:20px;">This portfolio website built from scratch using HTML, CSS, and JS!!<br><br></p>
    </div>
    <div class="Extended-Description">
      <p style="font-size:25px;">Extended Description:</p>
    </div>
    <div class="popup-body">
      <p style="font-size:20px;">I started learning about HTML & CSS during the spring of 2024 while taking a AP CSP course. Eventually (during the summer of 2024) I started to play around with these languages more and decided to pursue making my own portfolio website after being inspired seeing a former classmate do something similar. I officially started this project in October of 2024. This entire project has been a learning experience for me since I initially planned for it to be completely simple, just bare bones basic HTML & CSS. But this project has become bigger than what I imagined with every feature being added more and more until it seems fit.</p>
    </div>
  </div>
</div>

<!-- 第二个弹窗 -->
<div class="popup" id="popup-2">
  <div class="overlay"></div>
  <div class="content">
    <div class="close-btn" onclick="togglePopup('popup-2')">&times;</div>
    <div class="header">
      <h1 style="font-size:50px;">Sims Project</h1>
    </div>
    <div class="tldr">
      <p style="font-size:25px;"><br>TL:DR:</p>
    </div>
    <div class="popup-top">
      <p style="font-size:20px;">My Sims project description here!!<br><br></p>
    </div>
    <div class="Extended-Description">
      <p style="font-size:25px;">Extended Description:</p>
    </div>
    <div class="popup-body">
      <p style="font-size:20px;">Add your Sims project details here.</p>
    </div>
  </div>
</div>

2. 更新JavaScript函数 #

修改函数支持传入弹窗ID，实现多弹窗独立控制：

function togglePopup(popupId) {
  const popup = document.getElementById(popupId);
  // 自动关闭其他弹窗
  document.querySelectorAll('.popup.active').forEach(p => {
    if (p.id !== popupId) p.classList.remove('active');
  });
  popup.classList.toggle('active');
}

3. 优化CSS样式 #

统一弹窗类名，修复布局错误，添加第二个按钮hover提示：

section{
    min-height: 100vh;
    padding: 5rem 9% 5rem;
}

.photo-gallery {
  width: 90%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

.pic {
  margin-top: 130px;
  position: relative;
  height: auto;
  border-radius: 10px;
  box-shadow: 3px 3px 5px lightgray;
  cursor: pointer;
}

.pic img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.website::before {
  content: "This website!";
  color: #000000;
  text-align: center;
}

.sims::before {
  content: "Sims Project!";
  color: #000000;
  text-align: center;
}

.popup .overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  background: #949494b3;
  z-index: 1;
}

.popup {
  display: none;
}

.popup .content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: #fff;
  width: 1310px;
  height: 600px;
  z-index: 2;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 15px;
}

.header {
  text-align: center;
}

.popup-body {
  display: flex;
  text-align: left;
  justify-content: space-between;
  align-items: flex-start;
}

.popup-body img {
  border-radius: 12px;
  width: auto;
  height: auto;
  right: 50%;
}

.popup .close-btn {
  cursor: pointer;
  position: absolute;
  right: 20px;
  top: 20px;
  width: 30px;
  height: 30px;
  background: #222;
  color: #fff;
  font-size: 25px;
  font-weight: 600;
  line-height: 30px;
  text-align: center;
  border-radius: 50%;
}

.popup.active {
  display: block;
}

.popup.active .content {
  transition: all 300ms ease-in-out;
  transform: translate(-50%, -50%) scale(1);
}

.pic::before{
    position: absolute;
    pointer-events: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 25px;
    font-weight: bold;
    width: 100%;
    margin-top: -100px;
    opacity: 0;
    transition: .3s;
    transition-delay: .2s;
}
.pic:after{
    content: "";
    pointer-events: none;
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    border-radius: 10px;
    height: 0;
    background-color: #9f9f9f4a;
    transition: .3s;
}
.pic:hover::after{
    height: 100%;
}
.pic:hover::before{
    margin-top: 0;
    opacity: 1;
}

.Extended-Description {
  font-style: italic;
  font-weight: 500;
}

.tldr {
  font-style: italic;
  font-weight: 500;
}

关键改进点 #

• 两个按钮容器移入网格，实现并排显示
• 统一弹窗类名，减少冗余代码
• 增强函数逻辑，支持多弹窗独立控制，自动关闭其他弹窗
• 修复原CSS中弹窗初始位置的偏移错误

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