Vanilla Javascript Modal not appearing once clicked

Question

I am a beginner and tried to code along in a Javascript tutorial video(Beginner Projects). The problem is my modal did not pop-up once I clicked the button. The new class i've created (.open-modal) in vanilla javascript appeared in the dev tool elements the same as the close button once I unchecked the z-index: -10 and visibility: hidden. I also tried to click the close button but nothing happens. Thanks!

const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')

modalBtn.addEventListener("click", function() {
  modalOverlay.classList.add("open-modal");

});

modalClose.addEventListener("click", function() {
  modalOverlay.classList.remove("open-modal")

});

.open-modal {
  visibility: visible;
  z-index: 100;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  place-items: center;
  justify-content: center;
  background: rgba(76, 52, 90, 0.15);
  z-index: -10;
  visibility: hidden;
}

.modal-container {
  position: relative;
  text-align: center;
  background: #fff;
  font-weight: 300;
  border-radius: 10px;
  padding: 10px;
  height: 400px;
  display: flex;
  align-items: center;
}

<button class="btn btn-primary">OPEN</button>
</form>
</div>

</div>
</section>


<div class="modal-overlay">
  <div class="container modal-container">
    <h1>MODAL TEST!</h1>
    <button class="close-btn"><i class="fas fa-times"></i></button>

  </div>
</div>

You need to move your `.modal-open` declaration to after `.modal-overlay` as the `visibility: hidden` in `.modal-overlay` is overwriting that of `.modal-open` — pilchard, Sep 10 '21 at 08:13
@Dfaure yes it is within a form container. This is an old project i created as i'm learning html and css. Now that i am learning javascript i just used to add more features like hamburger menu and random colors as i code along with the tutorial. Is it a problem if its in the form? — Gad Ashell, Sep 10 '21 at 08:13
If you're putting it in the form be sure to give it a [type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type), otherwise it will submit the form. ``. Also, `visibility` only hides the element but it will still take up space (not seen here because you're using `fixed`). You might want to use `display: none` and `display: block` to hide/show it instead. see: [visibility:hidden vs display:none?](https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone) — pilchard, Sep 10 '21 at 08:15
@pilchard THANK YOU! It worked! And another learning for me. :) — Gad Ashell, Sep 10 '21 at 08:16
@pilchard Yes. It was once a submit button with a type. I just tried to change as i am tweaking my code to see if it works. Thank you again i just discovered that it is also important to place the code accordingly. I thought it was just in the javascript and no problem in the css. — Gad Ashell, Sep 10 '21 at 08:19

score 0 · Answer 1 · answered Sep 10 '21 at 08:13

You just have to write ".open-modal" after ".modal-container" or use "!important" end of your ".open-modal" styles to work well

const modalOverlay = document.querySelector(".modal-overlay")
const modalClose = document.querySelector(".close-btn")
const modalBtn = document.querySelector('.btn-primary')

modalBtn.addEventListener("click", function() {
  modalOverlay.classList.add("open-modal");

});

modalClose.addEventListener("click", function() {
  modalOverlay.classList.remove("open-modal")

});

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: flex;
  place-items: center;
  justify-content: center;
  background: rgba(76, 52, 90, 0.15);
  z-index: 0;
  visibility: hidden;
}

.modal-container {
  position: relative;
  text-align: center;
  background: #fff;
  font-weight: 300;
  border-radius: 10px;
  padding: 10px;
  height: 400px;
  display: flex;
  align-items: center;
}

.open-modal {
  visibility: visible;
  z-index: 100;
}

<button class="btn btn-primary">OPEN</button>
</form>
</div>

</div>
</section>


<div class="modal-overlay">
  <div class="container modal-container">
    <h1>MODAL TEST!</h1>
    <button class="close-btn"><i class="fas fa-times"></i></button>

  </div>
</div>

Vanilla Javascript Modal not appearing once clicked

1 Answers1