Recently, I've created pop-up on my portfolio website. And then, I'm using Bootstrap class to make own website more easier. So, I want to make back object more darker to make the pop-up object more pronounced, while opening pop-up. But some back object doesn't turn into darker theme. Please refer to below URL to know my problem precisely.
I tried:
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";
}
}
And my current code is below.
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";
}
I think you can use the modal-backdrop-dark id.
This is a live example of it: here