Идентификатор в модальное окно - JavaScript, Ajax

agatin · 08.10.2018, 13:14

Здравствуйте. Подскажите пожалуйста, как можно передать значение 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 · 08.10.2018, 13:39

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

Код:

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

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

agatin · 08.10.2018, 14:10

Цитата:

Сообщение от ADSoft

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

Код:

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

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

Спасибо за то что откликнулись. Что-то не работает. Может я что-то не так делаю?
Тот код который вы написали, я вписал в само модальное окно между тэгами <script></script>, но увы

Serge_Bliznykov · 08.10.2018, 14:14

Цитата:

Сообщение от agatin

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

это речь идёт про плагин к 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">×</a>
		</div>
			
	</body>

agatin · 08.10.2018, 14:31

Цитата:

Сообщение от 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">×</a>
		</div>
			
	</body>

Круто, работает. И еще маленькое уточнение, а как вот это <strong class="myid"></strong>, т.е. само значение, затолкать в переменную PHP, подскажите пожалуйста?

agatin · 08.10.2018, 14:34

Цитата:

Сообщение от agatin

Круто, работает. И еще маленькое уточнение, а как вот это <strong class="myid"></strong>, т.е. само значение, затолкать в переменную PHP, подскажите пожалуйста?

Спасибо большое, разобрался.

Всем спасибо, тему можно закрывать.

Serge_Bliznykov · 08.10.2018, 14:35

Цитата:

Сообщение от agatin

И еще маленькое уточнение, а как вот это <strong class="myid"></strong>, т.е. само значение, затолкать в переменную PHP, подскажите пожалуйста?

никак.

Самые основы. Как работает PHP.

когда работает ваш JS скрипт (на клиенте), PHP (на сервере) уже закончил работу.

Serge_Bliznykov · 08.10.2018, 14:37

Цитата:

Сообщение от agatin

Спасибо большое, разобрался.

Ну, отлично!

тему закрывать не будем. вдруг ещё что-то нужно будет написать/спросить/рассказать.

agatin · 08.10.2018, 15:00

Цитата:

Сообщение от Serge_Bliznykov

Ну, отлично!

тему закрывать не будем. вдруг ещё что-то нужно будет написать/спросить/рассказать.

Да, Вы были правы, появился вопрос.

Возникла теперь следующая ситуация, мне нужно не просто вывести значение id в модальном окне, типа Вы выбрали цифру 2, а еще и отослать по почте данный id, т.е. этот человек выбрал такой-то id. Вот как бы это реализовать?

P.S. Отослать по почте для меня не проблема, проблема избавиться от тэгов <strong> и </strong>

Спасибо

ADSoft · 08.10.2018, 15:21

Код:

strip_tags()

08.10.2018, 13:14	#1
agatin Пользователь Регистрация: 08.10.2018 Сообщений: 12	Идентификатор в модальное окно Здравствуйте. Подскажите пожалуйста, как можно передать значение 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. Спасибо. Последний раз редактировалось Arigato; 09.10.2018 в 14:36.

08.10.2018, 13:39	#2
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,184	там, где нужно выводить id, пишете примерно так Код: `$("[data-reveal-id='myModal']").on("click", function(){ console.log($(this).id) })` но кошернее было бы всем ссылкам дать один класс, а вот для передачи ид использовать какой нибудь атрибут, например rel= или тот-же data-bla-bla-bla Сайты, приложения, автоматизация в широком смысле слова

08.10.2018, 15:21	#10
ADSoft Старожил Регистрация: 25.02.2007 Сообщений: 4,184	Код: `strip_tags()` Сайты, приложения, автоматизация в широком смысле слова

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Не выходит модальное окно	lloudb	HTML и CSS	5	30.11.2017 15:59
Модальное окно	PR0Z0N	Фриланс	1	31.10.2012 19:09
Модальное окно	Sprat	PHP	3	28.03.2012 16:04
Модальное окно	adm2010	Общие вопросы Delphi	2	28.09.2011 22:21