БЛОГ НА HUSL


Помощь с сотнями всплывающих окон

Автор вопроса: Ирина Стеценко

У меня есть несколько карточек. К каждой карточки привязан свой popup. Но я сделала не правильно... Я к каждой кнопке "Подробнее" привязала свой popup(n), где n - номер popup-а. Как это можно оптимизировать, что б не плодить код?

На данный момент у меня таких popup-ов штук 50. Прикладываю несколько из них:

$(document).ready(function() {
  /*  Третья новость  */
  $('#reg-four').click(function() {
    $('#popup-fade4').fadeIn();
    return false;
  });

  // Клик по ссылке "Закрыть".
  $('#popup__close_four').click(function() {
    $(this).parents('#popup-fade4').fadeOut();
    return false;
  });

  // Закрытие по клавише Esc.
  $(document).keydown(function(e) {
    if (e.keyCode === 27) {
      e.stopPropagation();
      $('#popup-fade4').fadeOut();
    }
  });

  // Клик по фону, но не по окну.
  $('#popup-fade4').click(function(e) {
    if ($(e.target).closest('#popup4').length == 0) {
      $(this).fadeOut();
    }
  });

  /*  Третья новость  */
  $('#reg-five').click(function() {
    $('#popup-fade5').fadeIn();
    return false;
  });

  // Клик по ссылке "Закрыть".
  $('#popup__close_five').click(function() {
    $(this).parents('#popup-fade5').fadeOut();
    return false;
  });

  // Закрытие по клавише Esc.
  $(document).keydown(function(e) {
    if (e.keyCode === 27) {
      e.stopPropagation();
      $('#popup-fade5').fadeOut();
    }
  });

  // Клик по фону, но не по окну.
  $('#popup-fade5').click(function(e) {
    if ($(e.target).closest('#popup5').length == 0) {
      $(this).fadeOut();
    }
  });

  /*  Третья новость  */
  $('#reg-six').click(function() {
    $('#popup-fade6').fadeIn();
    return false;
  });

  // Клик по ссылке "Закрыть".
  $('#popup__close_six').click(function() {
    $(this).parents('#popup-fade6').fadeOut();
    return false;
  });

  // Закрытие по клавише Esc.
  $(document).keydown(function(e) {
    if (e.keyCode === 27) {
      e.stopPropagation();
      $('#popup-fade6').fadeOut();
    }
  });

  // Клик по фону, но не по окну.
  $('#popup-fade6').click(function(e) {
    if ($(e.target).closest('#popup6').length == 0) {
      $(this).fadeOut();
    }
  });
});
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
div,
p,
img,
form,
input,
a,
i,
p {
  padding: 0;
}

header {
  position: relative;
  color: #f1f1f1;
}

input:hover,
input,
input:focus {
  border: none;
  outline: none;
}

button,
button:visited,
button:active {
  border: none;
  outline: none;
}

span,
span:visited,
span:active {
  border: none;
  outline: none;
}

.clearfix {
  content: '';
  display: block;
  width: 100%;
  clear: both;
}

.way-desc {
  border-radius: 3px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  margin-top: 30px;
  overflow: hidden;
}

.way-desc__title_block {
  float: left;
  width: 33.33%;
  text-align: center;
  position: relative;
  height: 350px;
}

.way-desc__title {
  font-weight: 400;
  font-size: 1.5em;
  margin-bottom: 0;
  line-height: 320px;
  text-transform: uppercase;
}

.way-desc__title:after {
  content: '';
  width: 25%;
  height: 2px;
  background-color: rgba(11, 59, 167, 0.5);
  margin: 10px auto 0px auto;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 0%);
}

.way-desc__photo_block {
  float: left;
  width: 33.33%;
  height: 350px;
}

.way-desc__photo_block img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.way-desc__text {
  float: left;
  width: 33.33%;
  height: 350px;
}

.way-sec__par {
  text-align: left;
  font-weight: 400;
  color: rgba(4, 23, 65, 0.7);
  width: 75%;
  margin: 20px 42px;
}

.way-desc__title_block:hover {
  background-color: #0b3ba7;
  height: 350px;
  transition: all 0.3s ease;
}

.way-desc__title_block:hover h3 {
  color: #f1f1f1;
  transition: all 0.3s ease;
}

.way-desc__title_block:hover .way-desc__title:after {
  background-color: rgba(241, 241, 241, 0.5);
  top: 55%;
  transition: all 0.3s ease;
}

.way-desc__text:hover {
  background-color: #0b3ba7;
  transition: all 0.3s ease;
  height: 350px;
  display: block;
}

.way-desc__text:hover p {
  color: #f1f1f1;
  transition: all 0.3s ease;
}

.popup-fade {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 100000;
  padding-top: 50px;
  overflow: scroll;
  display: none;
}

.popup {
  background-color: #fff;
  width: 100%;
  padding-bottom: 30px;
}

.popup__img {
  width: 100%;
  height: 336px;
}

.popup__data {
  margin: 26px 0px 24px 42px;
  color: #fab165;
  font-weight: 400;
  font-size: 1.625em;
  display: inline-block;
}

.popup__title {
  margin: 48px 0px 24px 42px;
  color: #041741;
  font-weight: 400;
  font-size: 1.625em;
  width: 700px;
}

.popup__par {
  margin: 0px 0px 24px 42px;
  color: rgba(4, 23, 65, 0.76);
  font-weight: 400;
  height: 300px;
  overflow-y: scroll;
  width: 96.2%;
}

.popup__icon {
  position: relative;
  display: inline-block;
}

.popup__close {
  color: #fab165;
  font-weight: 400;
  font-size: 1.625em;
  float: right;
  position: absolute;
  top: -3%;
  right: -2%;
}

.popup__close:hover {
  text-decoration: none;
  color: #0b3ba7;
}

.popup__icon i.fas {
  color: rgba(4, 23, 65, 0.1);
  font-size: 4em;
  position: absolute;
  top: -1%;
  left: -1%;
}

.popup__par i.fas.left {
  left: 90%;
  top: 83%;
  position: absolute;
  color: rgba(4, 23, 65, 0.1);
  font-size: 4em;
}
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>ПЖ.РФ - Путеводитель</title>

  <!-- FONTS -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,200;0,400;0,800;1,200;1,400;1,800&display=swap" rel="stylesheet">


  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


</head>
<html>

<body>
  <!-- Четвёртый путеводитель -->
  <div class="popup-fade" id="popup-fade4">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="popup" id="popup4">
            <div class="popup__img popup__img4"></div>
            <div class="popup__block">
              <a href="" class="popup__close" id="popup__close_four"><i class="fas fa-times"></i></a>
              <h3 class="popup__title">ДАЧА СТАЛИНА</h3>
              <p class="popup__par clearfix">
                <span class="popup__icon">
                                            <i class="fas fa-quote-right"></i>
                                                <i>Хоста, пр. Курортный 120, тел. 8 (862) 297-05-02</i>
                                                Хотите попасть в прошлое, не прибегая к услугам машины времени? Тогда отправляйтесь на дачу Сталина, в одну из 18-ти резиденций великого вождя. Здесь всё осталось таким же, как при жизни советского лидера – «сталинские» интерьеры из ценных пород дерева, зелёный красивый парк и вид на море, вода в котором с этой точки обзора кажется особенно лазурной. 

                                            <i class="fas fa-quote-right left"></i>
                                        </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Четвёртый путеводитель -->
  <div class="popup-fade" id="popup-fade5">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="popup" id="popup5">
            <div class="popup__img popup__img5"></div>
            <div class="popup__block">
              <a href="" class="popup__close" id="popup__close_five"><i class="fas fa-times"></i></a>
              <h3 class="popup__title">ЧАЙНЫЕ ДОМИКИ</h3>
              <p class="popup__par clearfix">
                <span class="popup__icon">
                                            <i class="fas fa-quote-right"></i>
                                                <i>Уч-Дере, ул. Запорожская 302, тел. 8 (862) 235-16-16</i>
                                                Сочи считается самой северной точкой в мире, где благополучно растёт чай. Сочинский чай почему-то называется «Краснодарским», но его вкусовые качества сродни лучшим индийским и китайским сортам. Убедиться в этом в окружении русских народных интерьеров с самоварами и расписными стенами, наслаждаясь панорамным видом на побережье, можно в знаменитых чайных домиках. 
                                            <i class="fas fa-quote-right left"></i>
                                        </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Четвёртый путеводитель -->
  <div class="popup-fade" id="popup-fade6">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="popup" id="popup6">
            <div class="popup__img popup__img6"></div>
            <div class="popup__block">
              <a href="" class="popup__close" id="popup__close_six"><i class="fas fa-times"></i></a>
              <h3 class="popup__title">33 ВОДОПАДА</h3>
              <p class="popup__par clearfix">
                <span class="popup__icon">
                                            <i class="fas fa-quote-right"></i>
                                                <i>Головинка, урочище Джегош, в долине реки Шахе, в 4 км севернее п. Большой Кичмай</i>
                                                Каскадное чудо природы на территории Национального парка. Сюда не так-то просто добраться! Неглубокую, но стремительную реку Шахе лучше проехать на сочинском «джипе» или ГАЗ-63, которые регулярно там курсируют. 15 минут экстремальной езды от Большого Кичмая – и вот вас встречают первые высокие водопады. Поднимайтесь дальше, смотрите, купайтесь, отдыхайте и наслаждайтесь кристально чистым воздухом. 
                                            <i class="fas fa-quote-right left"></i>
                                        </span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Блоки содержания для вкладок -->
  <div class="tabs__content">
    <div class="row">
      <div class="col-lg-12">
        <div class="way-desc clearfix">
          <div class="way-desc__title_block">
            <h3 class="way-desc__title">Дача Сталина</h3>
          </div>
          <div class="way-desc__photo_block"><img src="../img/way/Дача Сталина.jpg" alt="Фото путеводителя" class="way-desc__photo"></div>
          <div class="way-desc__text">
            <p class="way-sec__par">
              Хотите попасть в прошлое, не прибегая к услугам машины времени? Тогда отправляйтесь на дачу Сталина, в одну из 18-ти резиденций великого вождя. Здесь всё осталось таким же, как при жизни советского лидера – «сталинские» интерьеры из ценных пород дерева,
              зелёный красивый парк и вид на море.

            </p>
            <div class="way-desc__link"><a href="#" id="reg-four">Подробнее</a></div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="way-desc clearfix">
          <div class="way-desc__title_block">
            <h3 class="way-desc__title">Чайные домики</h3>
          </div>
          <div class="way-desc__photo_block"><img src="../img/way/Чайный домик.jpg" alt="Фото путеводителя" class="way-desc__photo"></div>
          <div class="way-desc__text">
            <p class="way-sec__par">
              Сочи считается самой северной точкой в мире, где благополучно растёт чай. Сочинский чай почему-то называется «Краснодарским», но его вкусовые качества сродни лучшим индийским и китайским сортам.
            </p>
            <div class="way-desc__link"><a href="#" id="reg-five">Подробнее</a></div>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div class="way-desc clearfix">
          <div class="way-desc__title_block">
            <h3 class="way-desc__title">33 водопада</h3>
          </div>
          <div class="way-desc__photo_block"><img src="../img/way/33 водопада.jpeg" alt="Фото путеводителя" class="way-desc__photo"></div>
          <div class="way-desc__text">
            <p class="way-sec__par">
              Каскадное чудо природы на территории Национального парка. Сюда не так-то просто добраться! Неглубокую, но стремительную реку Шахе лучше проехать на сочинском «джипе» или ГАЗ-63, которые регулярно там курсируют. 15 минут экстремальной езды от Большого
              Кичмая.

            </p>
            <div class="way-desc__link"><a href="#" id="reg-six">Подробнее</a></div>
          </div>
        </div>
      </div>
    </div>

    <!-- JS & JQUERY -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
</body>

</html>


Источник

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

Автор решения: CbIPoK2513

Например такой, банальный и простой вариант.

let body_overflow = $('body').css('overflow') || 'auto'; // для скролла страницы

$('.cards').on('click', '.card .read', function(){ // При нажатии на кнопку "Подробнее" в карточке
  let content = $(this).closest('.card').find('.go-popup').html(); // получим контент
  //
  $('.popup-overlay').find('.content').html(content); // Вставляем описание в popup
  $('.popup-overlay').addClass('-show'); // показываем popup
  $('body').css('overflow', 'hidden'); // запретим скролл страницы
});

$('.popup-overlay .-closed').on('click', function(){ // при нажатии на кнопку "закрыть" в popup
  $('.popup-overlay').removeClass('-show'); // Спрячем popup
  $('.popup-overlay .content').html(''); // Удалим content в popup
  $('body').css('overflow', body_overflow); // вернём скролл странице
  
});
.cards {
  display: flex;
  flex-wrap: wrap;
  width: 270px;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 130px;
  height: 150px;
  background: gray;
  padding: 5px 0;
  box-sizing: border-box;
}

.card:nth-child(odd) {
  margin-right: 10px;
}

.card:nth-last-child(n+3) {
  margin-bottom: 10px;
}

.card .go-popup {
  display: none;
}

.card .read {
  cursor: pointer;
  border: 1px solid #333;
  padding: 5px;
  box-sizing: border-box;
}

/*  */

.popup-overlay {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: rgb(0,0,0,.25);
  overflow: hidden;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}

.popup-overlay.-show {
  display: flex;
}

.popup-overlay .popup {
  display: block;
  width: 300px;
  max-height: 90vh;
  overflow: hidden auto;
  background: #fff;
  padding: 5px;
  box-sizing: border-box;
}

.popup-overlay .popup .-closed  {
  display: block;
  width: 105px;
  border: 1px solid #333;
  margin: 5px auto 0;
  padding: 5px;
  box-sizing: border-box;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="cards">
  <div class="card">
    <div class="title">Новость 1</div>
    <div class="read">Подробнее</div>
    <!-- создаёте отдельный блок с описанием -->
    <div class="go-popup">Описание для новости 1</div>
  </div>

  <div class="card">
    <div class="title">Новость 2</div>
    <div class="read">Подробнее</div>
    <div class="go-popup">Описание для новости 2</div>
  </div>

  <div class="card">
    <div class="title">Новость 3</div>
    <div class="read">Подробнее</div>
    <div class="go-popup">Описание для новости 3</div>
  </div>
  
  <div class="card">
    <div class="title">Новость 4</div>
    <div class="read">Подробнее</div>
    <div class="go-popup">Описание для новости 4</div>
  </div>
</div>

<!-- Один popup -->
<div class="popup-overlay">
  <div class="popup">
    <div class="content"></div>
    <div class="-closed">Закрыть окно</div>
  </div>
</div>

В идеале же, если информация в popup будет подтягиваться через AJAX.

→ Ссылка

licensed under cc by-sa 3.0 with attribution.