Картинки-ссылки в модальном окне
Есть код, который отображает блок с изображением, заголовком и описанием. Когда пользователь нажимает на блок, он перенаправляется на страницу с адресом https://example.com :
<div class="u-container-style u-list-item u-radius-10 u-repeater-item u-shape-round u-white u-list-item-7" data-href="https://example.com" data-target="_blank">
<div class="u-container-layout u-similar-container u-container-layout-7">
<img class="u-image u-image-round u-preserve-proportions u-radius-10 u-image-7" src="./index/example.png" alt="" data-image-width="512" data-image-height="512">
<h3 class="u-align-left u-custom-font u-font-pt-sans u-text u-text-default u-text-13">Пример</h3>
<p class="u-text u-text-default u-text-14">Описание примерной страницы</p>
</div>
</div>
Как сделать, чтобы при нажатии на этот блок, вместо страницы https://example.com, открывалось модальное окно с двумя картинками-ссылками (https://example1.com и https://example2.com)?
Ответы (1 шт):
Я бы посоветовал использовать bootstrap 5 или fancybox
Я в примере использовал fancybox
В общем от вас требуется только скачать fancybox и подключить от него css и js файлы. И потом используйте HTML, который я написал.
И ещё, если будете использовать на странице несколько модалок, у них должен быть разный id, иначе он все блоки с одинаковым id, хоть они и будут в разных местах будет выводить в одной модалке так как из fancybox по сути можно и Галерею создавать.
У меня использовался - fancybox v3.5.7 если что. Вроде вышла уже 4 версия и там уже возможно по другому выводится модалка.
<a data-fancybox="modal" href="#modal1">Блок ссылка</a>
<div class="modal" id="modal1" style="display:none">Тут предположим 2 картинки, а по сути что угодно может быть</div>