如何在打开弹出窗口时使主题更暗

问题描述 投票：0回答：1

最近，我在我的作品集网站上创建了弹出窗口。然后，我使用 Bootstrap 类来使自己的网站变得更容易。因此，我想在打开弹出窗口时使背面对象更暗，以使弹出对象更明显。但某些后面的对象不会变成较暗的主题。请参考以下网址来准确了解我的问题。

My portfolio website

我尝试过：

  • 为我想要使其更暗的对象分配相同的 id，然后使其更暗 打开弹出窗口时颜色变暗
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/[email protected]/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";
}
javascript html css bootstrap-4 popup
1个回答
0
投票

我想你可以使用 

modal-backdrop-dark
id。

这是一个活生生的例子： 这里

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.