Modal sliding and opening

Question

I've created two modal's and I'm unsure how to make them both close with the same button. the first modal is closing fine, but, the second one won't close at all.

I'm also looking to give them an animation to slide in and out. However, I can't work out how to add it to the code that I've already created. Can anyone suggest how I could do this?

document.getElementById('project-1').addEventListener("click", function() {
  document.querySelector('.side-modal').style.display = "flex";
});

document.getElementById('project-2').addEventListener("click", function() {
  document.querySelector('.side-modal.second').style.display = "flex";
});

document.querySelector('.close-side-modal').addEventListener("click", function() {
  document.querySelector('.side-modal, .side-modal.second').style.display = "none";
});

.side-modal {
  width: 35%;
  position: fixed;
  height: 100%;
  background-color: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: none;
}

.side-modal .modal-content {
  height: 100%;
  width: unset;
}

.side-modal .close {
  color: #000 !important;
}

.button {
  font-size: 15px;
  color: #000;
}

.close {
  font-size: 40px;
  color: #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 0px;
  font-weight: 200;
  cursor: pointer;
}

<a href="#" id="project-1" class="project-1 button">project 1</a>
<a href="#" id="project-2" class="project-2 button">project 2</a>

<div class="side-modal">
  <div class="modal-content">
    <h2>first modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

<div class="side-modal second">
  <div class="modal-content">
    <h2>second modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

Answer 1

Your problem was that you were not targetting all the "close" elements.

You can use .querySelectorAll() to target all elements of a class, and .forEach() to loop through all of them.

Something like that:

// Open buttons
document.querySelectorAll('a.button').forEach(function(button) {
  button.addEventListener("click", function(elm) {
    var modal = button.getAttribute("modal");
    document.querySelector(modal).style.display = "block";
  });
});

// Close buttons
document.querySelectorAll('div.close').forEach(function(close) {
  close.addEventListener("click", function() {
    document.querySelectorAll('.side-modal').forEach(function(modal){
      modal.style.display = "none";
    });
  });
});

.side-modal {
  width: 35%;
  position: fixed;
  height: 100%;
  background-color: #fff;
  top: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: none;
}

.side-modal .modal-content {
  height: 100%;
  width: unset;
}

.side-modal .close {
  color: #000 !important;
}

.button {
  font-size: 15px;
  color: #000;
}

.close {
  font-size: 40px;
  color: #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 0px;
  font-weight: 200;
  cursor: pointer;
}

<!-- Added "modal" attributes to use them in the JavaScript -->
<a href="#" class="project-1 button" modal=".modal-1">project 1</a>
<a href="#" class="project-2 button" modal=".modal-2">project 2</a>

<div class="side-modal modal-1">
  <div class="modal-content">
    <h2>first modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

<div class="side-modal modal-2">
  <div class="modal-content">
    <h2>second modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

Note that I also used a custom attribute in the HTML to target the correct .side-modal easily.

Then, I suggest you to use functions. That way, you can easily add some movement to the elements.

For example, using the right property:

// Function to close all side-modals
function side_modals_close() {
  document.querySelectorAll('.side-modal').forEach(function(modal) {
    modal.style.right = "-40%";
  });
}

// Function to show one side-modal
function side_modal_open(name) {
  var modal = document.querySelector(name);
  modal.style.right = "0%";
}

// Open buttons
document.querySelectorAll('a.button').forEach(function(button) {
  button.addEventListener("click", function(elm) {
    side_modals_close();
    side_modal_open(button.getAttribute("modal"));
  });
});

// Close buttons
document.querySelectorAll('div.close').forEach(function(close) {
  close.addEventListener("click", function() {
    side_modals_close();
  });
});

.side-modal {
  width: 35%; 
  position: fixed;
  height: 100%;
  background-color: #fff;
  top: 0;
  right: -40%; /* TAKIT: Starts out of screen */
  bottom: 0;
  align-items: center;
  justify-content: center;
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
  display: block; /* TAKIT: Modified here, element is displayed but out of screen */
  transition: all 1s ease; /* TAKIT: Added this */
}

.side-modal .modal-content {
  height: 100%;
  width: unset;
}

.side-modal .close {
  color: #000 !important;
}

.button {
  font-size: 15px;
  color: #000;
}

.close {
  font-size: 40px;
  color: #fff;
  transform: rotate(45deg);
  position: absolute;
  right: 20px;
  top: 0px;
  font-weight: 200;
  cursor: pointer;
}

<!-- Added "modal" attributes to use them in the JavaScript -->
<a href="#" class="project-1 button" modal=".modal-1">project 1</a>
<a href="#" class="project-2 button" modal=".modal-2">project 2</a>

<div class="side-modal modal-1">
  <div class="modal-content">
    <h2>first modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>

<div class="side-modal modal-2">
  <div class="modal-content">
    <h2>second modal</h2>
    <div class="close close-side-modal">+</div>
  </div>
</div>