Передать data атрибуты в попап?

Question

[VitStar]

Добрый день!
Возникла такая необходимость. Делаю форму с помощью плагина magnific-popup.
На странице есть несколько товаров.
Что бы не делать несколько разных форм хотелось бы сделать 1 и к кнопке вызова добавить data атрибуты
(пример кнопки: Заказать звонок
После клика на кнопку эти дата атрибуты должны передаться в заголовок формы и создаться скрытый input с этим значением.
Копаюсь в документации (dimsemenov.com/plugins/magnific-popup/documentatio... нашел что то вроде подобное, но не могу разобраться
callbacks: {
parseAjax: function(mfpResponse) {

Может кто то сталкивался с подобной задачей ?

Comments

[Руслан Полин]

Можете конкретизировать задачу и приложить код в песочнице, чтобы видеть примерную разметку. Вы хотите создавать инпут уже в окне и записывать туда атрибуты из кнопки?

Answer 1

[Kripto77]

Поздно отвечаю - но решение 100% рабочее - может кому пригодится

Картинка в magnific popup через data

<div class="zoom" data-src="/images/test.jpg"></div>

$('.zoom').click(function(){
		$.magnificPopup.open({
	    	items: {
		      src: $(this).data('src')
    		},
		    type: 'image'
		});
});

Answer 2

[Алексей Скляров]

В чем проблема написать функцию, которая срабатывала бы при нажатии на кнопку? В ней вы уже указали бы в какой ID записать заголовок, и там же указываете значение val() для нужного инпута.

Comments

[VitStar]

Ну хотелось бы без id А именно 1 форма. Сейчас если кнопке прописать класс и в href id попапа. То оно вызывается. И так же хотело бы не создавать несколько форм и не присваивать id. Именно он бы ловил кнопку по которой был клик через this и подставлять ее data attr

[VitStar]

Если честно в js не очень силен. Сейчас только пытаюсь нормально изучать. Сам attr могу получить из элемента Но вот как это сделать в таком виде не могу понять. У самого плагина вроде есть такой функционал, но так же разобраться не смог.

[Алексей Скляров]

<form  onsubmit="sendForm(this); return false;" data-name="Заголовок">
  <div class="form-title"></div>
  <input type="text" name="name" placeholder="Имя">
  <input type="text" name="email" placeholder="E-mail">
  <input type="submit" value="Отправить">
</form>

function sendForm(form) {
	var formTitle = $(form).attr("data-name");
  $(form).parent('.form-title').html(formTitle);
}

Работоспособность не гарантирую, но поймете в каком направлении нужно идти.

[VitStar]

Блин или я не так объясняю Но тут вы просто получили атрибут и все. Это совершено не то что хотелось бы. Это то не проблема написать

[Алексей Скляров]

VitStar: вы получаете атрибут, после чего он вставляется в див form-title. Я не писал вам скрипт рабочий я показал вам как можно работать с этими атрибутами.