Доброго времени суток!
Первым делом стоит учесть, что мои знания php и js близки к отрицательному значению 
Кажется всё доступно изложено, но к сожалению - отказывается работать (при нажатии на ссылку - тишина)...
Разрабатываемый мной сайт на Joomla 4.2.8 с шаблоном
JA Stark v 2.0.1 от студии
Joomlart с уже интегрированным Bootstrap 4 (установка всего quickstart'ом), однако,
у меня на сайте в
head прописано
<script src="/media/vendor/bootstrap/js/modal.min.js?5.1.3" type="module"></script>
В демо шаблона уже реализовано открытие материала в модальном окне,
например, на
странице контактных данных - по ссылке с текстом
Privacy NoteНо, не получается по аналогии сделать подобное в другом месте, т.к. в конкретном случае сие реализовано плагином "Контент - Подтверждение согласия"
В запасе есть "козырь - танец с бубном", но что-то подсказывает, что его опередит "кулак ярости"...
-----------------------------------------------------------------------------------------
Как временное решение (но это не точно) было сделано:
-----------------------------------------------------------------------------------------
На
главной странице demo шаблона в верхней секции есть
кнопка Find Out More (слева; позиция hero-1)
и
кнопка иконка в круге "Play" (справа; позиция hero-2)
вот так это выглядитСодержимое обоих позиций управляется встроенным в quickstart модулем
JoomlArt Advanced Custom Module (acm), а именно:
hero-1 модулем
acm с ID=101;
hero-2 модулем
acm с ID=116.
Сделал дубль модуля
acm с видео (получился ID=144) опубликовал без указания позиции, и в нём
(
в параметрах модуля)
вместо ссылки на видео прописал ссылку на материал (добавив вконце
?tmpl=component),
затем скопировал часть полученного кода страницы, и привёл к общему стилю
<div class="btn btn-lg btn-secondary animated FadeInRight delay-2s" id="acm-video-144">
<a class="html5lightbox text-light" data-group="myvideo-144" href="/mypage?tmpl=component">Подробнее <i class="fas fa-long-arrow-alt-right"></i></a>
</div>
<script type="text/javascript">
(function($){
jQuery(document).ready(function($) {
$("#acm-video-144 .html5lightbox").html5lightbox({
autoslide: true,
showplaybutton: false,
jsfolder: "/templates/ja_stark/js/html5lightbox/"
});
});
})(jQuery);
</script>
потом вставил этот код в аналогичный модуль
acm в позиции слева (hero-1; ID=101) туда, где текст:
"Lorem ipsum dolor sit amet..." (текстовое поле
Introduction),
и очистил поля параметров "демо-кнопки" (та, что с текстом Find Out More)
И, всё бы хорошо, но
* место куда вставлен код - это текстовое поле (т.е. его содержимое между тегами
<p></p>),
и как следствие: ошибка
валидатора (
В области видимости нет элемента p,
но виден конечный тег p)
поэтому, теги
div заменил на
spanПо всей видимости и в html вкупе с css мои знания стремятся к нулю (мягко говоря) 