'Javascript how to darken modal backdrop

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">&times;</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.

javascriptcssmodal-dialogbackdrop


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions