Всплывающее модальное окно

// get all the buttons that open the modals
const openButtons = document.querySelectorAll("[data-opens]");

// loop over the buttons
openButtons.forEach(function(btn) {
  // get the selector
  var modalSelector = btn.dataset.opens;

  btn.addEventListener("click", function() {
    document.querySelector(modalSelector).showModal();
  });
});

//get all the close buttons and attach events
// get all the buttons that open the modals
const closeButtons = document.querySelectorAll(".close-button");

closeButtons.forEach(function(btn) {
  btn.addEventListener("click", function() {
    // find the parent that is a modal element and close it
    btn.closest('.modal').close();
  });
});

.modal {
  padding: 5em;
  max-width: 100ch;
}

.modal2 {
  padding: 1em;
  margin: 5em;
  max-width: 100ch;
}

.modal3 {
  padding: 1em;
  max-width: 50ch;
}

<dialog class = "modal" id = "modal">
  <h2>Bank Project Info</h2>
  <p>I have been a part of a group were we created a online bank in wich users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>
  <button class = "button close-button">close</button>
</dialog>
<dialog class = "modal" id = "modal2">
  <h2>School Project Info</h2>
  <p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class
    had.</p>
  <button class = "button close-button">close</button>
</dialog>



<dialog class = "modal" id = "modal3">
  <h2>ASP.NET Project Info</h2>
  <p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for
    the project.</p>
  <button class = "button close-button">close</button>
</dialog>


<button data-opens = "#modal">1</button>
<button data-opens = "#modal2">2</button>
<button data-opens = "#modal3">3</button>

// Bind event to an element that contains all of the modals and open buttons
document.body.addEventListener("click", function(evt) {
  // get was clicked
  const elem = event.target;

  // determine if we clicked the open button or the close button
  if (elem.matches('[data-opens]')) {
    var modalSelector = elem.dataset.opens;
    document.querySelector(modalSelector).showModal();
  } else if (elem.matches('.close-button')) {
    elem.closest(".modal").close();
  }
});

.modal {
  padding: 5em;
  max-width: 100ch;
}

.modal2 {
  padding: 1em;
  margin: 5em;
  max-width: 100ch;
}

.modal3 {
  padding: 1em;
  max-width: 50ch;
}

<dialog class = "modal" id = "modal">
  <h2>Bank Project Info</h2>
  <p>I have been a part of a group were we created a online bank in wich users could go in and borrow and deposit money. They could create their own account and log in and out on their own accord.</p>
  <button class = "button close-button">close</button>
</dialog>
<dialog class = "modal" id = "modal2">
  <h2>School Project Info</h2>
  <p>Me and some other classmates created a school project were we created a console application that enabled us to add both students and teacher into the application. We could add student information, who their teachers were and how many students each class
    had.</p>
  <button class = "button close-button">close</button>
</dialog>



<dialog class = "modal" id = "modal3">
  <h2>ASP.NET Project Info</h2>
  <p>We were tasked to build a administration application for a webshop, it was suppose to be a create with a seperate admin functionality for the website. Was a very interesting webpage that me and my group created, we used HTML, CSS and JavaScript for
    the project.</p>
  <button class = "button close-button">close</button>
</dialog>


<button data-opens = "#modal">1</button>
<button data-opens = "#modal2">2</button>
<button data-opens = "#modal3">3</button>