Передача переменной в модальное окно

17 мая 2017

Задача при клике на ссылку передать в модальное окно данные или переменную.

Все просто если ссылка одна, а когда несколько ссылок то выход сделать несколько модальных окон чтобы каждая ссылка открывала своё окно, но если ссылки динамические, количество их не постоянное и данные постоянно меняются то можно передать переменную, GET или POST параметр используя java script.

<button><a id="ModalWindow">Удалить навсегда!</a></button><!-- элемент модального окна с id=ModalWindow -->

<a id="2" data-target="#modal" onclick="modal_data(this.id)"></a><!-- ссылка открывает модальное окно #modal и передает скрипту значение которое храниться в id-->


<script type="text/javascript">

function modal_data(id) { //скрипт получает значение id из ссылки по которой мы кликнули

var a = document.getElementById("ModalWindow"); // ищем элемент с id ModalWindow

a.setAttribute("href", "?id="+id); // устанавливаем ему атрибут href и присваиваем ему значение ?id=2 }

</script>

Скрипт нужно разместить внизу страницы перед закрывающимся тэгом body

Теперь можно генерировать нужное количество ссылок и при клике на любую из них откроется модальное окно с подставленным в него атрибутом href и с правильным значением сгенерированным из id ссылки

Написать комментарий