Bootstrap - Modal (модальное окно) - Общие вопросы веб разработки

Проблема с сайтом. Не работает ничего модального на сайте, ни плагины, ни стандартные функции, вообще ничего..... Кроме Bootstrap Modal. Связано это может быть, наверное, с используемым Plazart Framework, поиск в инете решений по модальным окнам и почему они могут не работать дал пару решений, но ничего не сработало....  В итоге, довольствуемся тем, что есть....
Я прочитал статью https://itchief.ru/lessons/bootstrap-3/bootstrap-3-modal-window по модальным окнам в Bootstrap и в принципе логика ясна, прикрутил на сайт и всё работает. Но сразу скажу. Я не программист и могу не понимать всех тонкостей работы. Даже логику этих модалов мне понять несколько сложно.... Но есть задача и как ни крути решение нужно искать и работать с тем, с чем приходится....
Я как понял, модальное окно в Bootstrap вызывается или при наступлении события, или при нажатии на кнопку. Но, мне в данном примере нужно сделать как-то так, чтобы кнопки не было на странице, а модальное окно открывалось при нажатии, например, на текст, на гиперссылку, или на картинку. Подскажите пожалуйста, на конкретных примерах, как это должно быть реализовано?

ps: Все стандартные методы и все мануалы в инете, которые используют не Bootstrap modal - провалились.... Например, все стандартные методы, все расширения, галереи и так далее... https://www.regularlabs.com/extensions/modals/
Даже правильно установленный Modals от RegularLabs даёт следующий результат:

На странице (редактор отключен) пишем {modal url = "https://goo.gl/5r5faj" title = "Это мое место "} У меня есть заголовок {/ modal}
В результате получаем на выходе, на странице исходный код следующего вида:
"
{modal url = "https://goo.gl/5r5faj" title = "Это мое место "} У меня есть заголовок {/ modal}            "

Но не модальное окно(((.

у вас в примерах нет привязки к типу элемента, клик сработает и по ссылке, если у неё есть класс "btn". так что спокойно меняете на свой  в первой строке примера (оставляя точку в начале!) и будет работать

по поводу плагинов - вы точно активировали плагин после установки?

у вас в примерах нет привязки к типу элемента, клик сработает и по ссылке, если у неё есть класс "btn". так что спокойно меняете на свой  в первой строке примера (оставляя точку в начале!) и будет работать

Код

  $(".btn").click(function() {
    //открыть модальное окно с id="myModal"
    $("#myModal").modal('show');

по поводу плагинов - вы точно активировали плагин после установки?

Да, плагин активирован.

У меня пример на странице https://nnfond.ru/index.php/pages/about следующий:

<p> <img src="images/oldfond/001.jpg" alt="" width="187" height="258" /><button class="btn btn-info btn-lg" type="button" data-toggle="modal" data-target="#myModal2">Подробнее</button></p>
<div id="myModal2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Свидетельство о постановке на налоговый учет</h4>
</div>
<div class="modal-body"><img src="images/oldfond/001.jpg" /> </div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
</div>
</div>
</div>

Подскажите пожалуйста, в какое место в моём примере нужно добавить код, который вы написали? Например, мне нужно сделать так, чтобы при нажатии на картинку <img src="images/oldfond/001.jpg" alt="" width="187" height="258" /> открывалось модальное окно...

у вас уже установлен код, вам нужно его модифицировать, добавив ещё один класс для срабатывания

и присвоить его картинкам, дописав им атрибуты data-toggle и data-target, как у соседних кнопок

Да, это частично решило проблему. Удалось избавиться от кнопок и модальное окно с картинкой открывается при нажатии на миниатюру картинки.

Вот эту строку я так и не понял куда вставлять или что модифицировать, у меня на странице такого кода вообще нет. $(".btn, .modal_toggler").click(function()
Что получилось:
https://nnfond.ru/index.php/pages/about
1. Удалось избавиться от кнопок и при нажатии на картинку открывается модальное окно с картинкой.
2. Для картинок 1-2 пришлось добавить ссылку # для того чтобы при наведении мышкой на картинку отображался указатель клика, а не стрелочки. Если это единственный путь для отображения указателя, то сделаю и для картинки 3.

3. Создал тестовую ссылку Link на произвольный материал в конце страницы. Но при нажатии на неё..... Вместо самого материала отображается в модальном окне весь сайт сверху до низу с этим материалом.
То есть, если мне необходимо будет например выводить в модальном окне какую-то страницу, её нужно будет отдельно сверстать в HTML и положить в файловую систему сайта и сделать на неё ссылку?

не надо ничего оборачивать в ссылку, чтобы указатель поменялся, добавьте в стили
.modal_toggler{cursor:pointer}
модал подхватывается просто при наличии
data-toggle="modal" data-target="#myModal1", так что модифицировать ничего больше и не надо, по ходу.

ссылку на статью в таком виде вставлять
/index.php/news/82-genetic-test?tmpl=component

Ok. Спасибо. По ссылке проблема решена, всё работает. Теперь понятно как выдать контент в модальном окне.
По поводу .modal_toggler{cursor:pointer} ..... Наверное лучше будет оборачивать картинки в ссылки....

Я добавил .modal_toggler{cursor:pointer}  в один стиль, который привязан лишь к 3 страницам.... К остальным, в т.ч. и к главной привязан другой стиль. В итоге в самом верху, на всех страницах сайта появился текст ".modal_toggler{cursor:pointer} "....((. Убрал обратно от греха подальше.

Интересный только момент наблюдается.... В моём случае...
Все кнопки, все элементы отображаются в синем цвете. https://www.nnfond.ru/index.php/pages/about

Если я нажимаю на картинку, открывается модальное окно. Внизу кнопка закрыть. Тоже синяя. Но когда я нажимаю на Link - на ссылку, открывается материал https://www.nnfond.ru/index.php/news/82-genetic-test?tmpl=component то в открывшемся модальном окне нет крестика чтобы его закрыть, нет кнопки "Закрыть". Ок. Кликаем по свободной от модального окна области экрана и все элементы вдруг становятся желтого цвета. Кнопки, менюшки, значки в футере.... До нажатия F5 или до перехода на любую другую страницу...
Указал другое имя шаблона - сработало. Но кнопки закрыть внизу и крестика наверху опять же нет....

Код такой:
<p><a class="modal_toggler" href="index.php/news/82-genetic-test?tmpl=Contact" data-toggle="modal" data-target="#myModal3">link</a></p>
<div id="myModal3" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<h4 class="modal-title">Статья тест</h4>
</div>
<div class="modal-body">&lt;href="/index.php/news/82-genetic-test?tmpl=Contact" /&gt; </div>
<div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Закрыть</button></div>
</div>
</div>
</div>