I'm having trouble darkening the background when I open the modal. I found a ton of info on how to do this with bootstrap, but I am looking for a way to do it using javascript. I currently have the modal opening and closing when I want it to, so I just need to implement the backdrop feature.
HTML
<body>
<h1>Modal</h1>
<button id="myBtn" data-toggle="modal fade" data-target="#myModal">Open Modal</button>
<section class="modal hidden" id="myModal">
<span class="close">×</span>
<h2>I am the modal</h2>
<p>hello world</p>
</section>
</body>
CSS
.modal {
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
border: solid 2px black;
border-radius: 10px;
padding: 30px;
margin: 20px 0;
background-color: greenyellow;
}
.hidden{
display: none;
}
JS
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Any help or starting points on how to implement the backdrop would be appreciated.
You could have a div with the class modalBackdrop to darken the background. You can have it take up the entire page, and give it a color that has transparency like rgba(0,0,0,0.2). You can replace your HTML with the following to add a modal backdrop div element.
<body>
<h1>Modal</h1>
<button id="myBtn" data-toggle="modal fade" data-target="#myModal">Open Modal</button>
<div class="modalBackdrop hidden"></div>
<section class="modal hidden" id="myModal">
<span class="close">×</span>
<h2>I am the modal</h2>
<p>hello world</p>
</section>
</body>
And add the following styles to your CSS for the modal backdrop
.modalBackdrop{
position:fixed;
top:0;
left:0;
width:100vw;
height:100vh;
background-color:rgba(0,0,0,0.2);
}
Finally, replace your JS with the following to show and hide the backdrop when needed
var modal = document.getElementById("myModal");
var btn = document.getElementById("myBtn");
var modalBackdrop = document.getElementsByClassName("modalBackdrop")[0];
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
modalBackdrop.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
modalBackdrop.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
modalBackdrop.style.display = "none";
}
}
Also, making the transparency lower in the CSS will make the background darker when showing the modal.