打开弹窗时如何使页面背景区域变暗？Bootstrap项目求助

架构老林

2026-6-30

Bootstrap作品集网站弹窗背景变暗失效问题

我用Bootstrap搭建个人作品集网站，添加弹窗后希望打开弹窗时页面背景区域变暗以突出弹窗，但部分背景元素未成功切换为暗色主题。尝试给目标元素分配ID，在showPopUp和hidePopUp函数中修改元素背景色，问题仍存在。

尝试的代码

const theme = ['theme-change1', 'theme-change2', 'theme-change3', 'theme-change4', 'theme-change5', 'theme-change6', 'theme-change7', 'theme-change8', 'theme-change9',];

function showPopUp() {
  document.getElementById('pop-up').style.display = "block";
  document.body.style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('class-remover').classList.remove('bg-light'); 
  for(let i = 0; i < theme.length; i++){
    document.getElementById(theme[i]).style.backgroundColor = "rgba(0, 0, 0, .5)";
  }
}

function hidePopUp() {
  document.getElementById('pop-up').style.display = "none";
  document.body.style.backgroundColor = "white";
  document.getElementById('class-remover').classList.add('bg-light');
   for(let i = 0; i < theme.length; i++){
    document.getElementById(theme[i]).style.backgroundColor = "white";
  }
}

当前HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fi=no">
  <title>HirotoTakao - About</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link rel="stylesheet" href="./my-portfolio.css">
  <script src="./my-portfolio.js"></script>
</head>
<body>
  <div class="pop-up-div" id="pop-up">
    <section class="main-pop-up">
      <video src="../underwater-motion.mp4" height="100%" width="100%" controls></video>
    </section>
    <footer class="footer-pop-up">
       <button onclick="hidePopUp()" class="btn btn-primary">Exit</button>
    </footer>
  </div>
  <div class="main-page">
    <nav class="navbar navbar-expand-lg navbar-light bg-light" id="class-remover">
      <a class="navbar-brand" href="#">HirotoTakao</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="mr-auto"></ul>
        <ul class="navbar-nav pull-right">
          <li class="nav-item active">
            <a class="nav-link" href="#">About<span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="../contact/contact.html">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
      <div class="card card-margin">
        <div class="card-header header-font" id="theme-change5"> 
          Hobby
        </div>
        <ul class="list-group list-group-flush">
          <li class="list-group-item" id="theme-change1">Programming</li>
          <li class="list-group-item" id="theme-change2">Collecting snappy-on tags<br>
          <img src="../snapy-on tag.jpg" class="snappy-on-tag" alt="">
          </li>
        </ul>
        </div>    

  <div class="card card-margin" style="width: 100%;">
    <div class="card-header header-font" id="theme-change3">
      Skills
   </div>
   <ul class="list-group list-group-flush">
       <div class="list-group-item" style="border:solid 1px white;" id="theme-change3">
          <table>
            <tr>
              <th>Language</th>
              <td>HTML, CSS, Javascript</td>
            </tr>
            <tr>
              <th>Engines, Frameworks, Libraries</th>
              <td>Node.js, Express.js, JQuery</td>
            </tr>
            <tr>
              <th>Tools, OS</th>
              <td>Linux, Windows, Bootstrap, MySQL, PostgreSQL, Git</td>
            </tr>
          </table>   
       </div>
  </div>
      <div class="card-margin" style="width:100%; border:solid 1px rgba(0,0,0,.125); border-radius:.25rem;">
        <div class="card-header header-font">
          Favorite something
        </div>
        <ul class="list-group list-group-flush" id="theme-change4">
          <li class="list-group-item">
            <span>Favorite Youtube: <a href="https://www.youtube.com/@zelihaakpinar/videos" class="link-adjustment">Zeliha Akpinar</a></span>
            <br><span>Favorite Character: <a href="https://gup.fandom.com/wiki/Anchovy" class="link-adjustment">Anchovy</a></span>
          </li>
        </ul>
      </div>
      <div style="margin-bottom:50px;">
        <h1 class="display-4 text-center" style="margin-bottom:32px;">My Works</h1>
        <div style="display:flex;">
          <div class="card" style="width: 18rem; margin-right:13px;" id="theme-change6">
            <a href="https://openprocessing.org/sketch/2158648"><img class="card-img-top" src="../underwater-motion.png" alt="Card image cap"></a>
            <div class="card-body" id="theme-change7">
              <h5 class="card-title">Underwater-Motion(p5.js)</h5>
              <p class="card-text">none</p>
              <button class="btn btn-primary" onclick="showPopUp()">Play Demo Video</button>
            </div>
          </div>
          <div class="card" style="width: 18rem;" id="theme-changer8">
            <a href="https://github.com/hirototakao/meaning-teller"><img class="card-img-top" src="../Slack_logo_new.png" alt="Card image cap"></a>
            <div class="card-body" id="theme-changer9">
              <h5 class="card-title" style="margin-top:13px;">Meaning-teller(Slack API)</h5>
              <p class="card-text">none</p>
              <a href="https://github.com/hirototakao/meaning-teller" class="btn btn-primary">View code</a>
            </div>
          </div>
        </div>
      </div>
  </div>
</body>
</html>

当前JavaScript代码

function showPopUp() {
  document.getElementById('pop-up').style.display = "block";
  document.body.style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('class-remover').classList.remove('bg-light'); 
  document.getElementById('theme-change1').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change2').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change3').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change4').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change5').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change6').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change7').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change8').style.backgroundColor = "rgba(0, 0, 0, .5)";
  document.getElementById('theme-change9').style.backgroundColor = "rgba(0, 0, 0, .5)";
}

function hidePopUp() {
  document.getElementById('pop-up').style.display = "none";
  document.body.style.backgroundColor = "white";
  document.getElementById('class-remover').classList.add('bg-light');
  document.getElementById('theme-change1').style.backgroundColor = "white";
  document.getElementById('theme-change2').style.backgroundColor = "white";
  document.getElementById('theme-change3').style.backgroundColor = "white";
  document.getElementById('theme-change4').style.backgroundColor = "white";
  document.getElementById('theme-change5').style.backgroundColor = "white";
  document.getElementById('theme-change6').style.backgroundColor = "white";
  document.getElementById('theme-change7').style.backgroundColor = "white";
  document.getElementById('theme-change8').style.backgroundColor = "white";
  document.getElementById('theme-change9').style.backgroundColor = "white";
}

解决方法

1. 修正ID拼写错误

HTML中最后两个卡片的ID是theme-changer8和theme-changer9，但JS里调用的是theme-change8、theme-change9，拼写不一致导致这两个元素无法被选中修改样式。把HTML里的这两个ID改成theme-change8、theme-change9即可。

2. 用CSS类批量控制样式（更简洁易维护）

不需要逐个元素修改背景色，给<body>添加一个状态类，通过CSS选择器批量修改所有需要变暗的元素：

CSS代码（添加到my-portfolio.css）

/* 弹窗打开时的全局暗色样式 */
body.popup-active {
  background-color: rgba(0, 0, 0, .5);
}
body.popup-active .navbar {
  background-color: rgba(0, 0, 0, .5) !important;
}
body.popup-active .card,
body.popup-active .list-group-item,
body.popup-active .card-header {
  background-color: rgba(0, 0, 0, .5) !important;
  color: #fff; /* 可选：文字变白，提升暗色背景下的可读性 */
}

/* 恢复默认样式 */
body:not(.popup-active) .card,
body:not(.popup-active) .list-group-item,
body:not(.popup-active) .card-header {
  background-color: #fff !important;
  color: inherit;
}

修改后的JavaScript代码

function showPopUp() {
  document.getElementById('pop-up').style.display = "block";
  document.body.classList.add('popup-active');
  document.getElementById('class-remover').classList.remove('bg-light');
}

function hidePopUp() {
  document.getElementById('pop-up').style.display = "none";
  document.body.classList.remove('popup-active');
  document.getElementById('class-remover').classList.add('bg-light');
}

3. 优化弹窗遮罩（可选，体验更好）

给弹窗添加全屏半透明遮罩，确保弹窗层级最高，同时背景变暗效果更自然：

CSS代码

.pop-up-div {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.main-pop-up {
  width: 100%;
  max-width: 800px;
}

这样修改后，弹窗自带遮罩层，无需修改页面其他元素的背景色，就能实现突出弹窗的效果，同时避免了逐个元素修改的繁琐。

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

打开弹窗时如何使页面背景区域变暗？Bootstrap项目求助

尝试的代码 #

当前HTML代码 #

当前JavaScript代码 #

解决方法 #

1. 修正ID拼写错误 #

2. 用CSS类批量控制样式（更简洁易维护） #

3. 优化弹窗遮罩（可选，体验更好） #