I don't understand why my pop-up isn't working

Question

So I am currently working on a personal project but cannot get my modal to appear in the browser. I've tried researching it but I'm getting the same answers back that I am currently applying.

const open1 = document.getElementById('open1');
const modal_container = document.getElementById('modal_container');
const close1 = document.getElementById('close1');

open1.addEventListener('click', () => {
    modal_container.classList.add('show');
});

close1.addEventListener('click', () => {
    modal_container.classList.remove('show');
});

div.modal-container {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.real45 {
    background-color: #BC6C25;
    border: 0;
    border-radius: 25px;
    color: #fff;
    padding: 10px 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.real45:hover {
    color: black;
}

.modal {
    background-color: #fff;
    width: 600px;
    max-width: 100%;
    padding: 30px;
    border-style: solid;
    border-radius: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    text-align: center;
}

.modal h1 {
    margin: 0;
}

.modal p {
    opacity: 0.7;
}

.modal-container.show {
    opacity: 1;
    pointer-events: 1;
}

<button class="real45" id="open1"> Open Me </button>
  
<div class="modal-container" id="modal_container">
  <div class="modal">
    <h1> Modals are cool </h1>
    <p> practice text </p>
    <button class="real45" id="close1"> Close Me </button>
  </div>
</div>

Please any and all suggestions are welcome I greatly appreciate it.

Answer 1

When you put pointer-events: none; on .modal-container, all child nodes will also inherit that property, which disables all pointer events (clicking, dragging, hovering, etc.).

So when you attempt to close the modal by clicking the button, nothing will happen.

I've added pointer-events: auto; to the .modal so that these events work for child nodes and you are able to close the modal.

const open1 = document.getElementById('open1');
const modal_container = document.getElementById('modal_container');
const close1 = document.getElementById('close1');

open1.addEventListener('click', () => {
  modal_container.classList.add('show');
});

close1.addEventListener('click', () => {
  modal_container.classList.remove('show');
});

div.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.real45 {
  background-color: #BC6C25;
  border: 0;
  border-radius: 25px;
  color: #fff;
  padding: 10px 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.real45:hover {
  color: black;
}

.modal {
  background-color: #fff;
  width: 600px;
  max-width: 100%;
  padding: 30px;
  border-style: solid;
  border-radius: 25px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  text-align: center;
  position: relative;
  pointer-events: auto;
}

.modal h1 {
  margin: 0;
}

.modal p {
  opacity: 0.7;
}

.modal-container.show {
  opacity: 1;
  pointer-events: 1;
}

#open1 {
  position: relative;
  z-index: 1;
}

<button id="open1">open
</button>

<div class="modal-container" id="modal_container">
  <div class="modal">
    <h1> Modals are cool </h1>
    <p> practice text </p>
    <button class="real45" id="close1"> Close Me </button>
  </div>
</div>

Answer 2

I needed to add my <script> below my <button> and <div> tags. This is the correct way to make it work in browser.

<button class="real45" id="open1"> Open Me </button>

<div class="modal-container" id="modal_container">
  <div class="modal">
    <h1> Modals are cool </h1>
    <p> practice text </p>
    <button class="real45" id="close1"> Exit </button>
  </div>
</div>

<script>
  const open1 = document.getElementById("open1");
  const modal_container = document.getElementById("modal_container");
  const close1 = document.getElementById("close1");

  open1.addEventListener("click", () => {
    modal_container.classList.add("show");
  });

  close1.addEventListener("click", () => {
    modal_container.classList.remove("show");
  });
</script>