@Ivan0103

Как передать значения в модальное окно magnificPopup?

Помогите, пожалуйста. В jquery не силен( Нужно передать значения data и html элементов в модальное окно magnificPopup. Суть в том, что на странице будет много карточек, при нажатии на которые их описание должно открывать в модальном окне, шаблон модального окна будет один для всех карточек.

Код карточки:
<div class="person-1 person-wrapper" data-id="person-1_description">
      <div class="person-top">
        <a href="#person-modal" class="person-modal" data-id="person-1_description">
          <img class="b-lazy" data-src="img/person/person-1.png" src="img/other/Spin.gif" alt="Аниматор Леди Баг и Супер кот">
          <div class="person_age id-color-1">
            <p>3-11 лет</p>
          </div>
          <p class="person_title">Аниматоры Леди Баг и Супер кот</p>
        </a>
      </div>
      <div class="person-bottom">
        <a href="#callback" class="callback person_zakaz" data-form="Заказать Леди Баг и Супер кот" data-text="Заказать Леди Баг и Супер кот">Заказать</a>
      </div>
      <div class="description-block" style="display: none;">
        <div class="person-1_description">
         Леди Баг и Супер Кот приглашают на веселый праздник самых смелых, отважных, умных мальчишек и девчонок! 
         Вместе с Леди Баг ребята будут противостоять коварным замыслам злодея Бражника. Ведь ни в коем случае 
         нельзя позволить суперзлодею завладеть талисманами супергероев. Чтобы одержать победу над Бражником и 
         пошатнуть его злодейское могущество, вместе с Леди Баг ребятам нужно будет пройти ряд испытаний.
         Это будет незабываемый праздник! 
       </div>
       <div id="description-img-1" data-modal-img-1="img/animatory/anim-1.jpg"></div>
       <div data-title="Аниматоры Леди Баг и Супер кот"></div>
     </div>
   </div>


Код модального окна:
<div id="person-modal" class="modal-animatory">
    <div class="modal-animatory-content">
      <div class="modal-animatory-header">
        <h5 class="modal-animatory-title" id="modal_title"></h5>
      </div>
      <div class="modal-animatory-block">
        <p class="modal-animatory-text" id="modal_text"></p>
      </div>
      <div class="modal-animatory-img">
        <img class="modal-image" src="" alt="">
      </div>
    </div>
  </div>


В карточке есть блок description-block, его значения и нужно передать в модальное окно.
data-title передать в id="modal_title"
.person-1_description передать в id="modal_text"
data-modal-img-1 передать в .modal-image

Также у каждой карточки есть свой ID #person-1_description, #person-2_description и т.д.

Помогите, пожалуйста.
  • Вопрос задан
  • 29 просмотров
Пригласить эксперта
Ответы на вопрос 1
TTATPuOT
@TTATPuOT
https://code.patriotovsky.ru/
Делаете событие onclick для div'а .person-wrapper и берёте значения из data- аттрибутов. Далее, вставляете их сразу в div #person-modal куда нужно. Без вообще какого-либо участия magnificPopup.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы