Последние записи

Интенсив по Python: Работа с API и фреймворками 24-26 ИЮНЯ 2022. Знаете Python, но хотите расширить свои навыки?
Slurm подготовили для вас особенный продукт! Оставить заявку по ссылке - https://slurm.club/3MeqNEk

Online-курс Java с оплатой после трудоустройства. Каждый выпускник получает предложение о работе
И зарплату на 30% выше ожидаемой, подробнее на сайте академии, ссылка - ttps://clck.ru/fCrQw

9th
Окт

Как можно передать значение id в модальное окно, при клике на ссылку

Posted by obzor under JavaScript

Подскажите пожалуйста, как можно передать значение id в модальное окно, при клике на ссылку.

Код:


<a href='#' data-reveal-id='myModal' id='1'>1</a>
<a href='#' data-reveal-id='myModal' id='2'>2</a>
<a href='#' data-reveal-id='myModal' id='3'>3</a>
<a href='#' data-reveal-id='myModal' id='4'>4</a>
<a href='#' data-reveal-id='myModal' id='5'>5</a>

Чтобы в модальном окне отобразилась переменная id. Т.е. интересует сама реализация вывода id в модальном окне.
Все это пытаюсь прикрутить к Reveal Modals.

ADSoft

там, где нужно выводить id, пишете примерно так

Код:


$("[data-reveal-id='myModal']").on("click", function(){
 console.log($(this).id)
})

но кошернее было бы всем ссылкам дать один класс, а вот для передачи ид использовать какой нибудь атрибут, например rel= или тот-же data-bla-bla-bla

Serge_Bliznykov

это речь идёт про плагин к Jquery — «jquery.reveal.js»: https://zurb.com/playground/reveal-modal-plugin ?

наверное, нужно или вставить свой обработчик или изменить тот, что есть в jquery.reveal.js

ну, например, в jquery.reveal.js

Код:


/*---------------------------
 Listener for data-reveal-id attributes
----------------------------*/

	$('a[data-reveal-id]').live('click', function(e) {
		e.preventDefault();
		var modalLocation = $(this).attr('data-reveal-id');
		var myid=$(this).attr('id');
		if(!myid)
			myid='';
		var idcontainer=$('#'+modalLocation).find('.myid');
		if(idcontainer.length>0)
			idcontainer.text(myid);
		$('#'+modalLocation).reveal($(this).data());
	});

demo.html:

Код:


	<body>

		<a href="#" class="big-link" data-reveal-id="myModal" id="p1">
			Fade and Pop
		</a>	
		
		<a href="#" class="big-link" data-reveal-id="myModal" data-animation="fade" id="p222222">
			Fade
		</a>
		
		<a href="#" class="big-link" data-reveal-id="myModal" data-animation="none" id="p3">
			None
		</a>

		<div id="myModal" class="reveal-modal">
			<h1>Reveal Modal Goodness</h1>
			<p>ID = <strong class="myid"></strong></p>
			<p>This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.</p>
			<a class="close-reveal-modal">&#215;</a>
		</div>
			
	</body>