I am working on styling two div elements with different widths: one at 15% and the other at 85%. My goal is to create a pop-up form within the second div that covers the entire page when clicked, but so far it only covers the 85% width. Is there a way to make it cover the full page? The element containing the background for the pop-up has a class of pop-bg and is nested within the #main element.
#sidebar {
position: fixed;
height: 100%;
width: 15%;
margin: 0px;
background-color: #111;
border-radius: 0px;
}
#main {
width: 85%;
float: right;
background: black;
}
/* pop-up background */
.pop-bg {
background-color: rgba(0, 0, 0, 0.8);
width: 100%;
height: 100%;
position: absolute;
top: 0;
display: none;
justify-content: center;
align-items: center;
}
Below is the JavaScript code:
document.getElementById('button').addEventListener("click", function() {
document.querySelector('.pop-bg').style.display = "flex";
});
document.querySelector('.close').addEventListener("click", function() {
document.querySelector('.pop-bg').style.display = "none";
});