I recently added a pop-up feature to my portfolio website and utilized Bootstrap classes to enhance its functionality. In order to make the pop-up object more prominent, I wanted to darken the background when opening the pop-up. However, some elements in the background did not turn darker as expected. For a detailed understanding of my issue, please visit the following URL:
Here is what I have tried:
- Assigning the same id to the objects that I want to darken, and then adjusting their background color while displaying the pop-up.
// JavaScript code
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";
}
}
Below is my current HTML code.
HTML:
// HTML code
<!DOCTYPE html>
<html lang="en">
...
...
... (the remainder of the HTML content remains unchanged)
</body>
</html>
JavaScript:
// JavaScript code
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)";
... (repeat for all theme IDs)
}
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";
... (repeat for all theme IDs)
}