Как при переходе на следующее модальное окно закрыть предыдуще?

Question

Проблема в том, что при переходе на следующее модальное окно, прошлое остаться под ним открытым, как сделать так, чтоб оно закрывалось при переходе на следующее?

$(function() {

  /* Modal
  ===========================*/


  const modalCall = $("[data-modal]");

  const modalClose = $("[data-close]");

  modalCall.on("click", function(event) {
    event.preventDefault();

    let $this = $(this);
    let modalId = $this.data('modal');

    $(modalId).addClass('show');
    $("body").addClass('no-scroll');


  });
  /* 
  ===========================*/

  modalClose.on("click", function(event) {
    event.preventDefault();

    let $this = $(this);
    let modalParent = $this.parents('.modal');

    modalParent.removeClass('show');
    $("body").removeClass('no-scroll');
  });

  $(".modal").on("click", function(event) {

    $(this).removeClass('show');
    $("body").removeClass('no-scroll');
  });

  $(".modal__dialog").on("click", function(event) {
    event.stopPropagation();
  });




});

/* slider
===========================*/

const modalBtn = document.querySelectorAll('[data-project]');
const body = document.body;


modalBtn.forEach(item => {
  item.addEventListener('click', event => {

    let $this = event.currentTarget;
    let modalId = $this.getAttribute('data-project');
    let project = document.getElementById(modalId);

    project.classList.add('show');



  });


  const modalBtn2 = document.querySelectorAll('[data-project2]');
  const body = document.body;


  modalBtn2.forEach(item => {
    item.addEventListener('click', event => {

      let $this = event.currentTarget;
      let modalId = $this.getAttribute('data-project2');
      let project = document.getElementById(modalId);

      project.classList.add('show');




    });
    $('.modal-work__preview')
      .on('mouseenter', function() {
        $(this).find('.modal-work__slide1').show();
      })
      .on('mouseleave', function() {
        $(this).find('.modal-work__slide1').hide();
      });

    $('.modal-work__preview')
      .on('mouseenter', function() {
        $(this).find('.modal-work__slide2').show();
      })
      .on('mouseleave', function() {
        $(this).find('.modal-work__slide2').hide();
      });



  });
});

body {
  margin: 0;
  width: 100%;
  height: auto;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background: url("https://cloud.astral-geeks.com/s/QWEW/preview");
  -webkit-background: column;
}

.no-scroll {
  overflow: hidden;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}


/* Intro
===========================*/

.intro {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1920px;
  height: auto;
}

h1 {
  color: white;
  font-size: 36px;
  text-align: center;
}

.image-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: auto;
  margin-bottom: 50px;
}

.media {
  width: 30%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.media:hover {
  cursor: pointer;
}

.overlay {
  position: absolute;
  height: 264px;
  width: 352px;
  z-index: 3;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.media:hover .overlay {
  background-image: linear-gradient(to top, #000000 20%, #1b203193);
  width: 100%;
  height: 100%;
  opacity: .75;
}

img {
  width: 100%;
  height: auto;
  z-index: -1;
  margin: auto;
  transform: scale(1);
  transition: all ease-in-out 0.5s;
}

.media:hover img {
  transform: scale(1.1);
  filter: blur(2px);
}

.image-details {
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  font-size: 20px;
  z-index: 4;
  position: absolute;
  top: 100%;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.media:hover .image-details {
  top: 40%;
  opacity: 1;
}

.title__link {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: bottom;
  padding: 0 10px 10px;
  font-size: 10px;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

@media only screen and (max-width: 900px) {
  .media {
    width: 70%;
    height: 70%;
  }
}


/* Modal
===========================*/

.modal {
  display: none;
  width: 100%;
  height: 100%;
  padding: 0 1rem;
  overflow: auto;
  background-color: #010d0ad0;
  backdrop-filter: blur(3px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.modal.show {
  display: flex;
}

.modal__dialog {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  position: relative;
  background-color: rgba(36, 50, 64, 0);
}

.modal__close {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: -0.2rem;
  right: 0.9rem;
  z-index: 1;
  transition: .2s linear;
}

.modal__close:hover {
  transform: rotate(45deg);
}


/* MODAL BLOCK
=========================================*/

.modal-work {
  display: flex;
}

.modal-work__preview {
  width: 65%;
  position: relative;
  overflow: hidden;
}

.modal-work__slide1 {
  display: flex;
  top: 40%;
  width: 50px;
  height: 100px;
  position: absolute;
  float: right;
  z-index: 1000;
  background: #00000032;
  transition: .1s linear;
}

.modal-work__slide1:hover {
  background: #00000094;
}

.modal-work__slide2 {
  display: flex;
  top: 40%;
  width: 50px;
  height: 100px;
  position: absolute;
  left: 94%;
  z-index: 1000;
  background: #00000032;
  transition: .1s linear;
}

.modal-work__slide2:hover {
  background: #00000094;
}

.modal-work__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
}

.modal-work__content {
  width: 35%;
  height: 493px;
  padding: 0.1rem 2.73rem 1.2rem 1.73rem;
  position: relative;
  overflow: auto;
}

.modal-work__header {
  margin-bottom: 5px;
}

.modal-work__title {
  margin-bottom: 5px;
  font-size: 18px;
  color: rgb(133, 173, 199);
  font-weight: bold;
  text-transform: uppercase;
}

.modal-work__info {
  font-size: 12px;
  color: rgb(133, 173, 199);
  margin-bottom: 5px;
  font-weight: 600;
}

.modal-work__client {
  margin-bottom: 5px;
}

.modal-work__client-title {
  margin-bottom: 5px;
  font-size: 13px;
  color: rgb(133, 173, 199);
  font-weight: 600;
}

.modal-work__client-company {
  font-size: 13px;
  font-weight: 600;
  color: rgb(114, 164, 200);
}

.modal-work__text {
  margin-bottom: 5px;
  font-size: 14px;
  color: rgb(93, 156, 201);
  font-style: italic;
}

.scrollmenu {
  overflow: scroll;
  scrollbar-width: none;
  height: 500px;
  overflow-x: hidden;
}

.modal-work__footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 1.8rem 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.modal-work__btn {
  width: 35px;
  height: 35px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: .2s linear;
}

.modal-work__btn:hover {
  transform: translateY(-12px);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width" , initial-scale=1.0>
  <meta http-eqiv="X-UA-compatible" content="ie=edge">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,900;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
  <title>COLLECTIONS</title>

</head>

<body>
  <intro class="intro">
    <div class="image-wrapper">
      <div class="media" data-modal="#modal_project_1">
        <a class="overlay" class="title__link" href="#"></a>
        <img src="https://cloud.astral-geeks.com/s/12321/preview" alt="">
        <div class="image-details">
          <a class="title__link" href="#">
            <p>As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and
              to spend time there stillAs we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer
              and probably no warmer, and to spend time there still</p>
          </a>
        </div>
      </div>
      <div class="media" data-modal="#modal_project_2">
        <a class="overlay" class="title__link" href="#"></a>
        <img src="https://cloud.astral-geeks.com/s/dasd/preview" alt="Open">
        <div class="image-details">
          <a class="title__link" href="">
            <p>As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and
              to spend time there stillAs we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer
              and probably no warmer, and to spend time there still</p>
          </a>

        </div>
      </div>






      <div class="modal" id="modal_project_1">
        <div class="modal__dialog">

          <button class="modal__close" type="button" data-close>
      <img src="https://cloud.astral-geeks.com/s/qdww/download/png" alt="">
    </button>

          <div class="modal-work">
            <div class="modal-work__preview">
              <img class="modal-work__photo" src="https://cloud.astral-geeks.com/s/12321/preview" alt="">
              <!-- / PHOTO MODAL -->

              <img class="modal-work__slide1" src="https://cloud.astral-geeks.com/s/ADASDSAD/preview" alt="">
              <img class="modal-work__slide2" data-project="modal_project_2" src="https://cloud.astral-geeks.com/s/33333/preview" id="next1" alt="">
            </div>

            <div class="modal-work__content">

              <div class="modal-work__header">
                <h2 class="modal-work__title">Project title</h2>
                <div class="modal-work__info">category | 2022

                </div>
              </div>

              <div class="modal-work__client">
                <div class="modal-work__client-title">Client:</div>
                <div class="modal-work__client-company">astral-geeks</div>
              </div>

              <div class="modal-work__text">
                <p>
                  As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to sspend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend
                  time there still As we enter the 21st c


                  <p>
                    As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there still demands a dedication not seen in ordinary life, the and to spend time there still
                    demands a dedication not seen in ordinary life, the
                  </p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <!-- /.modal__work -->

    </div>
    <!-- /.modal__dialog -->

    </div>
    <!-- /.modal one 1 -->



    <div class="modal" id="modal_project_2">

      <div class="modal__dialog">

        <button class="modal__close" type="button" data-close>
      <img src="https://cloud.astral-geeks.com/s/qdww/download/png" alt="">
    </button>

        <div class="modal-work">
          <div class="modal-work__preview">
            <img class="modal-work__photo" src="https://cloud.astral-geeks.com/s/dasd/preview" wialt="">
            <!-- / PHOTO MODAL -->

            <img class="modal-work__slide1" data-project2="modal_project_1" src="https://cloud.astral-geeks.com/s/ADASDSAD/preview" alt="">
            <img class="modal-work__slide2" data-project="modal_project_3" src="https://cloud.astral-geeks.com/s/33333/preview" alt="">

          </div>

          <div class="modal-work__content">

            <div class="modal-work__header">
              <h2 class="modal-work__title">Case</h2>
              <div class="modal-work__info"> data | 2022

              </div>
            </div>

            <div class="modal-work__client">
              <div class="modal-work__client-title">categoi</div>
              <div class="modal-work__client-company">client</div>
            </div>

            <div class="modal-work__text">
              <p>
                As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time
                there stillugh physically Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no wrobably no warmer, and to spend time there
                stillugh physically Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no wrobably no warmer, and to spend time there stillugh
                physically Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no wrobably no warmer, and to spend time there stillugh physically
                Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there stillugh physically Antarctica

                <p>
                  As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there still demands a dedication not seen in ordinary life, the and to spend time there still
                  demands a dedication not seen in ordinary life, the
                </p>
            </div>
          </div>

          </button>
        </div>
      </div>
    </div>
    <!-- /.modal__work -->

    </div>
    <!-- /.modal__dialog -->

    </div>
    <!-- /.modal 2-->
</body>

Answer 1

В данном ответе я демонстрирую как можно сократить код если основываться на данных. Я уверен что у Вас таких модалок будет много, проще будет их добавлять через данные, а не через разметку.

Данные я вынес в объект под названием json который вполне мог бы прилетать с сервера или загружаться из файла, убрал вторую модалку. Процесс переключения заключается в заполнении модалки нужными данными.

Конечно, код нуждается в дальнейшей доработке. Моя цель была не столько сделать рефакторинг, сколько показать что можно обойтись одной модалкой для решения задачи.

json = {
  project_1: {
    work: {
      title: "Project title",
      info: "category | 2022",
      photo: "https://cloud.astral-geeks.com/s/12321/preview",
      slides: ["project_1","project_2"],
      text: [
        "As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to sspend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there still As we enter the 21st c",
        "As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there still demands a dedication not seen in ordinary life, the and to spend time there still demands a dedication not seen in ordinary life, the"
      ]
    },
    client: {
      title: "categoi",
      company: "client"  
    },
  },
  project_2: {
    work: {
      title: "Case",
      info: "data | 2022",
      photo: "https://cloud.astral-geeks.com/s/dasd/preview",
      slides: ["project_1","project_2"],
      text: [
        "As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there stillugh physically Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no wrobably no warmer, and to spend time there stillugh physically Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no wrobably no warmer, and to spend time there stillugh physically Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no wrobably no warmer, and to spend time there stillugh physically Antarctica Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there stillugh physically Antarctica",
        "As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there still demands a dedication not seen in ordinary life, the and to spend time there still demands a dedication not seen in ordinary life, the"
      ]
    },
    client: {
      title: "categoi",
      company: "client"  
    },
  }
}


function showProject(projectName){
  const data = json[projectName];
  const modelProject = $('#modal_project');

  modelProject.find('.modal-work__photo')[0].src = data.work.photo;

  const prev = modelProject.find('.modal-work__slide1')[0];
  prev.dataset.project = data.work.slides[0]
  const next = modelProject.find('.modal-work__slide2')[0]
  next.dataset.project = data.work.slides[1]
  
  modelProject.find('.modal-work__title').text(data.work.title);
  modelProject.find('.modal-work__info').text(data.work.info);

  modelProject.find('.modal-work__client-title').text(data.client.title)
  modelProject.find('.modal-work__client-company').text(data.client.company)

  modelProject.find('.modal-work__text p').text(data.work.text[0])
  modelProject.find('.modal-work__text p').text(data.work.text[1])

  $('#modal_project').addClass('show');
  $("body").addClass('no-scroll');
}


$(function() {

  /* Modal
  ===========================*/
  const modalCall = $("[data-modal]");
  const modalClose = $("[data-close]");

  modalCall.on("click", function(event) {
    event.preventDefault();
    let $this = $(this);
    let modalId = $this.data('modal');
    showProject(modalId.replace('#modal_', ''))
  });
  
  /* 
  ===========================*/

  modalClose.on("click", function(event) {
    event.preventDefault();
    let $this = $(this);
    let modalParent = $this.parents('.modal');
    modalParent.removeClass('show');
    $("body").removeClass('no-scroll');
  });

  $(".modal").on("click", function(event) {
    $(this).removeClass('show');
    $("body").removeClass('no-scroll');
  });
  $(".modal__dialog").on("click", function(event) {
    event.stopPropagation();
  });
});

/* slider
===========================*/

const modalBtn = document.querySelectorAll('[data-project]');
const body = document.body;

modalBtn.forEach(item => {
  item.addEventListener('click', event => {
    let $this = event.currentTarget;
    let modalId = $this.getAttribute('data-project');
    showProject(modalId)
  });
});

body {
  margin: 0;
  width: 100%;
  height: auto;
  font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  background: url("https://cloud.astral-geeks.com/s/QWEW/preview");
  -webkit-background: column;
}

.no-scroll {
  overflow: hidden;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}


/* Intro
===========================*/

.intro {
  margin-top: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  max-width: 1920px;
  height: auto;
}

h1 {
  color: white;
  font-size: 36px;
  text-align: center;
}

.image-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin: auto;
  margin-bottom: 50px;
}

.media {
  width: 30%;
  height: 30%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.media:hover {
  cursor: pointer;
}

.overlay {
  position: absolute;
  height: 264px;
  width: 352px;
  z-index: 3;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.media:hover .overlay {
  background-image: linear-gradient(to top, #000000 20%, #1b203193);
  width: 100%;
  height: 100%;
  opacity: .75;
}

img {
  width: 100%;
  height: auto;
  z-index: -1;
  margin: auto;
  transform: scale(1);
  transition: all ease-in-out 0.5s;
}

.media:hover img {
  transform: scale(1.1);
  filter: blur(2px);
}

.image-details {
  width: 100%;
  height: 100%;
  text-align: center;
  color: white;
  font-size: 20px;
  z-index: 4;
  position: absolute;
  top: 100%;
  opacity: 0;
  transition: all ease-in-out 0.5s;
}

.media:hover .image-details {
  top: 40%;
  opacity: 1;
}

.title__link {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  vertical-align: bottom;
  padding: 0 10px 10px;
  font-size: 10px;
  color: rgb(255, 255, 255);
  text-decoration: none;
}

@media only screen and (max-width: 900px) {
  .media {
    width: 70%;
    height: 70%;
  }
}


/* Modal
===========================*/

.modal {
  display: none;
  width: 100%;
  height: 100%;
  padding: 0 1rem;
  overflow: auto;
  background-color: #010d0ad0;
  backdrop-filter: blur(3px);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.modal.show {
  display: flex;
}

.modal__dialog {
  width: 100%;
  max-width: 1200px;
  margin: auto;
  position: relative;
  background-color: rgba(36, 50, 64, 0);
}

.modal__close {
  width: 20px;
  height: 20px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  position: absolute;
  top: -0.2rem;
  right: 0.9rem;
  z-index: 1;
  transition: .2s linear;
}

.modal__close:hover {
  transform: rotate(45deg);
}


/* MODAL BLOCK
=========================================*/

.modal-work {
  display: flex;
}

.modal-work__preview {
  width: 65%;
  position: relative;
  overflow: hidden;
}

.modal-work__slide1 {
  display: flex;
  top: 40%;
  width: 50px;
  height: 100px;
  position: absolute;
  float: right;
  z-index: 1000;
  background: #00000032;
  transition: .1s linear;
}

.modal-work__slide1:hover {
  background: #00000094;
}

.modal-work__slide2 {
  display: flex;
  top: 40%;
  width: 50px;
  height: 100px;
  position: absolute;
  left: 94%;
  z-index: 1000;
  background: #00000032;
  transition: .1s linear;
}

.modal-work__slide2:hover {
  background: #00000094;
}

.modal-work__photo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
}

.modal-work__content {
  width: 35%;
  height: 493px;
  padding: 0.1rem 2.73rem 1.2rem 1.73rem;
  position: relative;
  overflow: auto;
}

.modal-work__header {
  margin-bottom: 5px;
}

.modal-work__title {
  margin-bottom: 5px;
  font-size: 18px;
  color: rgb(133, 173, 199);
  font-weight: bold;
  text-transform: uppercase;
}

.modal-work__info {
  font-size: 12px;
  color: rgb(133, 173, 199);
  margin-bottom: 5px;
  font-weight: 600;
}

.modal-work__client {
  margin-bottom: 5px;
}

.modal-work__client-title {
  margin-bottom: 5px;
  font-size: 13px;
  color: rgb(133, 173, 199);
  font-weight: 600;
}

.modal-work__client-company {
  font-size: 13px;
  font-weight: 600;
  color: rgb(114, 164, 200);
}

.modal-work__text {
  margin-bottom: 5px;
  font-size: 14px;
  color: rgb(93, 156, 201);
  font-style: italic;
}

.scrollmenu {
  overflow: scroll;
  scrollbar-width: none;
  height: 500px;
  overflow-x: hidden;
}

.modal-work__footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 1.8rem 1rem;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
}

.modal-work__btn {
  width: 35px;
  height: 35px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: .2s linear;
}

.modal-work__btn:hover {
  transform: translateY(-12px);
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" , initial-scale=1.0>
    <meta http-eqiv="X-UA-compatible" content="ie=edge">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,900;1,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <title>COLLECTIONS</title>
  </head>
  <body>
    <div class="intro">
      <div class="image-wrapper">

        <div class="media" data-modal="#modal_project_1">
          <a class="overlay" class="title__link" href="#"></a>
          <img src="https://cloud.astral-geeks.com/s/12321/preview" alt="">
          <div class="image-details">
            <a class="title__link" href="#">
              <p>As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there stillAs we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there still</p>
            </a>
          </div>
        </div>
        
        <div class="media" data-modal="#modal_project_2">
          <a class="overlay" class="title__link" href="#"></a>
          <img src="https://cloud.astral-geeks.com/s/dasd/preview" alt="Open">
          <div class="image-details">
            <a class="title__link" href="">
              <p>As we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there stillAs we enter the 21st century, our perception of Antarctica has changed. Although physically Antarctica is no closer and probably no warmer, and to spend time there stillAlthough physically Antarctica is no closer and probably no warmer, and to spend time there still</p>
            </a>
          </div>
        </div>
        
        <div class="modal" id="modal_project">
          <div class="modal__dialog">
            <button class="modal__close" type="button" data-close>
              <img src="https://cloud.astral-geeks.com/s/qdww/download/png" alt="">
            </button>
            <div class="modal-work">
              <div class="modal-work__preview">
                <img class="modal-work__photo" src="" alt="">
                <img class="modal-work__slide1" data-project="" src="https://cloud.astral-geeks.com/s/ADASDSAD/preview" alt="">
                <img class="modal-work__slide2" data-project="" src="https://cloud.astral-geeks.com/s/33333/preview" id="next1" alt="">
              </div>
              <div class="modal-work__content">
                <div class="modal-work__header">
                  <h2 class="modal-work__title"></h2>
                  <div class="modal-work__info"></div>
                </div>
                <div class="modal-work__client">
                  <div class="modal-work__client-title"></div>
                  <div class="modal-work__client-company"></div>
                </div>
                <div class="modal-work__text">
                  <p>1</p>
                  <p>2</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>    
  </body>
</html>

Надеюсь, мое решение не идет в разрез с вашими планами и Вы сможете им воспользоваться в своем проекте. Если будут вопросы, спрашивайте, не стесняйтесь:)

БЛОГ НА HUSL

Как при переходе на следующее модальное окно закрыть предыдуще?

Ответы (1 шт):