Передать данные в модальное окно

Всем хорошего дня!
Помогите пожалуйста в решении задачи.
Есть на сайте выведенные flex новостные сообщения (на главной выводим только картинку и заголовок, остальные данные делает hidden ):
<div class="flex">

<div class="flexitem">
<div class="itemimg">
<img src="URL" alt="альтернативный текст">
</div>
<div class="itemtitle">
<a class="title">Заголовок 1</a>
</div>
<div class="itemtext">
Полный текст сообщения
</div>
</div>
<div class="flexitem">
<div class="itemimg">
<img src="URL" alt="альтернативный текст">
</div>
<div class="itemtitle">
<a class="title">Заголовок 2</a>
</div>
<div class="itemtext">
Полный текст сообщения
</div>
</div>
<div class="flexitem">
<div class="itemimg">
<img src="URL" alt="альтернативный текст">
</div>
<div class="itemtitle">
<a class="title">Заголовок 3</a>
</div>
<div class="itemtext">
Полный текст сообщения
</div>
</div>

</div>

<script>

function abc () {
}

</script>

<div class="modal">

Картинка

Заголовок

Полный текст сообщения

</div>

Задача у меня в том, что нужно в модальном окне показать по клику новость полностью (вместе с полным текстом и т.д.).
Как правильно найти и получить тексты окружающего, именно нужного Item, после клика на конкретный заголовок.
То есть я нашел много способов открыть модальные окна, но как правильно получить в SCRIPT данные div-ов окружения нужного Заголовка? (можно ли это получить используя class элементов, или только по id)

Конечно про передачу "переменных" во множестве в инете, но так толком не смог именно с передачей данных в скрипт найти)

Подскажите пожалуйста - как можно решить данную задачу!

Добавлено через 1 час 53 минуты
C id решение изучил)))
можно находить и присваивать
<div class="flexitem" id="1">
<div class="itemimg">
<img src="URL" alt="альтернативный текст">
</div>
<div class="itemtitle">
<a class="title" onclick="abc('1')">Заголовок 2</a>
</div>
<div class="itemtext">
Полный текст сообщения
</div>
</div>

получаем в скрипт номер id в new:
<script>
function abc (new) {

ищем в коллекции нужный flexItem по id:
var test = document.getElementById(new);

далее уже в нем (его коллекции тегов) можно найти все нужное и присвоить переменной:
$a=test.getElementsByTagName("div")[1].innerText;
и т.д.

}
</script>

НО вопрос остается как все сделать изящнее))) то есть найти фокус -где кликал и взять содержание окружающих тегов???

и далее все это "затолкать и показать" в модальном окне (классном-преклассном)))

Добавлено через 23 минуты
тут немного надо уточнить)))
в коллекции по id 3 div-а [0,1,2]
можно также добраться до текста заголовка в теге a:
$a=test.getElementsByTagName("div")[1].getElementsByTagName("a")[0].innerText;

Кстати id я присваиваю в Laravel динамически (может быть любой строкой):
берем уникальное значение названия для id: <div class="flexitem" id="{{ $item['title'] }}"
и это же передаем в функцию <a onclick="abc('{{ $item['title'] }}')"........

function abc (new) {
var eml = document.getElementById(new);
.......
}

Добавлено через 22 часа 31 минуту
Всем хорошего дня!
Вот и вторую часть задачи в общем и целом решил)
Не хотел идти путем "лишних" GET или "POST" запросов при передаче,
посмотрел в интернете варианты и сделал так:

- взял "базовый и простой" вариант модального окна на
http://dontforget.pro/javascri... -plaginov/
стили, форму и т.д. наложил свои конечно)
если кому нужен будет скролл на окне не забываем в CSS окна вставить: overflow: auto;

-в коде модального окна присваиваем id нужным элементам (могут быть любые - не только div)

<div class="itemtitle" id="itemtitle">
<a class="title" onclick="abc('1')">Заголовок 2</a>
</div>
<div class="itemtext" id="itemtex">
Полный текст сообщения
</div>
</div>

- в скрипте:
<script>
function abc (new, new2) {

ищем в коллекции нужный flexItem по id:
var test = document.getElementById(new);

далее уже в нем (его коллекции тегов) можно найти все нужное и присвоить переменной:
$a=test.getElementsByTagName("div")[1].innerText;
и т.д.

просто передаем данные нужной сформированной переменной по id окна!):
$('#itemtext').text(a);

можно передать исполняемое
$('#itemtext').html(a);[/COLOR]

и т.д. и т.п. средствами jscript

все передается и по умолчанию показывается строково, поэтому более замороченная задача показать Заголовок как ссылку рабочую:

- в коде страницы при клике в функцию передаю нужное:

<div class="itemtitle">
<a class="title" onclick="abc('1','link')">Заголовок 2</a>
</div>

-не стал мудрить и в скрипте просто сформировал нужную исполняемую строку простой конкатенацией)))

$a=test.getElementsByTagName("div")[0].getElementsByTagName("a")[0].innerText;
var newtitle='<a href="'+new2+'" id="title" class="modaltitle" target="_blank">'+a+'</a>';

и передаем уже ее в окно <p id="title" class="modaltitle"></p>

$('#itemtitle').html(newtitle);

}
</script>

далее по необходимым элементам и т.д. подбираю-формирую что необходимо)

Возможно это и несколько "на-коленочный" подход) но у меня так работает в среде PHP7-Laravel5.4-OpenServer-Chrome
В других браузерах не тестил пока. Может и не зря писал и пригодится кому.

Удачи всем во всем!

0

0

Наверное и лучше было бы)
Но это не рабочий код , а ход решения задачи описал.
Пока ждал подсказок от других....
поэтому просто изложил ход решения, который возможно кому-то пригодиться.
Профи (особенно по яве) пофыркают конечно!))), но ведь и не помогли же.

0

0

Нвверное так.
НО в самом начале сама задача была написана аккуратно-четко-понятно и без тегов оформления.

0

В продолжение темы!)))
Сделал модальное окно в котором открываю отдельную новость из "Ленты новостей".
и соответственно Script:
НО вот (блин как всегда) у меня появился странный глюк:
- откываешь-открываешь окна и после открытия 7-9 окна начинает проскальзывать ( не видно) overlay и далее модальные окна начинают открываться не с первого "клика" на ссылку, а со второго - третьего...
В Chrome и FireFox одинаково)))
Выложил для теста на хостинг - эффект такой-же.
Есть у кого мысли по этому эффекту?

0

Всем привет)
Я подумал-посмотрел и пришел к выводу, что при тестировании проявляю "чрезмерное рвение".
То есть кликаю-открываю окна слишком быстро и эффекты анимации накладываются и начинает глючить особенно overlay.
Настроил время открытия-закрытия в анимации и вроде все нормализовалось.

0