Javascript how to darken modal backdrop

Question

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.

Some good anwers here: https://stackoverflow.com/questions/28096346/how-to-change-background-opacity-when-bootstrap-modal-is-open — Nathaniel Flick, Feb 01 '22 at 19:37

score 1 · Accepted Answer · answered Feb 01 '22 at 19:32

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

Thank you, it worked great! Only issue I had was that the backdrop was over the modal and so I couldn't click out of it, but I fixed this by adding a z-index to the modal. — Victor, Feb 01 '22 at 20:12

Javascript how to darken modal backdrop

1 Answers1