Как по this выводить модальное окно?

Question

[Genri_Rus]

Вот пример: https://codepen.io/Genri_Rus/pen/eYNpLKP

Как сделать, чтобы при клике на первую кнопку выводился Текст №1

А при клике на вторую кнопку - Текст №2

Аналогично при клике на третью кнопку - Текст №3

Comments

[Шохрух Шаймардонов]

Напишите функцию обертку, которая будет в качестве аргумента получать текст и вызывать попап

[Genri_Rus]

Шохрух Шаймардонов, не совсем понятно

Это в callbacks: {

} нужно вызывать ?

[historydev]

Genri_Rus, 《отметить ответом》

[Genri_Rus]

Владимир, я отметил, но не до конца понятно, как в функцию src путь картинки добавить

Answer 1

[historydev]

Javascript:

function createPopup(text, element) {
$(element).magnificPopup({
    items: [
      {
        src: `<span>${text}</span>`,
        type: 'inline'
      }
    ],
    gallery: {
      enabled: true
    }
});
}

createPopup('Text', '.open-popup')
createPopup('Text2', '.open-popup2')
createPopup('Text3', '.open-popup3')

Html

<button class="open-popup">Первая кнопка</button>

<button class="open-popup2">Вторая кнопка</button>

<button class="open-popup3">Третья кнопка</button>

Comments

[Genri_Rus]

Спасибо, а если у меня кроме текста еще доп. текста есть ?

Вот пример: https://codepen.io/Genri_Rus/pen/eYNpLKP

[Genri_Rus]

И галерея также пропала: https://codepen.io/Genri_Rus/pen/rNVOqKV

[Genri_Rus]

lloydbanks, а зачем удалили ваше решение ?

[lloydbanks]

Genri_Rus, затем что вы задолбали меня своими нубскими вопросами. Ещё раз: читайте внимательно документацию

[Genri_Rus]

lloydbanks, я понял, но зачем было удалять ваше решение - я так и не понял )

[historydev]

Genri_Rus, вот тут ответы на все ваши вопросы.

[Genri_Rus]

lloydbanks, ну ваше решение было бы полезно другим пользователям

В документации для $.magnificPopup.open также есть callbacks
И для magnificPopup также есть callbacks

Написали бы, что elementParse не работает для $.magnificPopup.open

[historydev]

Genri_Rus, вы пришли за помощью или права качать? Мы решили вашу задачу, создавайте новый вопрос с конкретной проблемой, а не топчите мозги человеку который дал вам решение. Так много банальщины в одном вопросе это страшно, вы уверены что это ваше?

[Genri_Rus]

Владимир, это понятно )

Но все таки удалять решения некрасиво как-то, даже если в данной документации не до конца понятна работа magnific-popup

[Genri_Rus]

Владимир, и вы не решили мою задачу, хотя она отмечена )

ваш вариант инициализирует каждый раз новую модалку для каждой кнопки. добавьте к этим 3м кнопкам еще 30 и будете 33 раза вызывать свою функцию с разными классами. Как костыль пойдет.

А у lloydbanks был неплохой вариант )

Answer 2

[Genri_Rus]

Вообщем, в связи с тем, что lloydbanks удалил свое решение, то вот его правильный вариант

Имейте ввиду, что данный способ не будет работать так:

$(document).on('click', '.open-popup', function(){
const data = [
  {
    src: '<span>Текст №1</span>',
    type: 'inline'
  },
  {
    src: '<span>Текст №2</span>',
    type: 'inline'
  },
  {
    src: '<span>Текст №3</span>',
    type: 'inline'
  },
]

$.magnificPopup.open({ 
  callbacks: {
    elementParse: function(item) {
      item.src = data[item.index].src;
    }
  }
 });
});