Создание модальных ссылок в виде всплывающих окон в Joomla


На сегодня всплывающие изображения являются очень популярной частью веб-сайтов. Вы используете их, в частности в галереях, но все больше и больше в статьях. Joomla дает вам возможность очень легко добавлять всплывающие изображения.

Первое, что нужно сделать, это поместить следующую строку кода в файл шаблона index.php:

<?php JHTML::_( 'behavior.modal' ); ?>

Она должна быть размещена в верхней части перед HTML частями в начале вашего шаблона (сразу после линии defined('_JEXEC') or die;). Это все, что вам нужно с точки зрения программирования.

Затем просто вставьте ссылку в контент в таком порядке:

<a class="modal" href="/images/stories/big_picture.jpg">
    <img src="/images/stories/thumb_picture.jpg" border="0" alt="A picture" /></a>

Важным битом является class="modal".

ПОЛЕЗНО  Кастомная страница 404 ошибки с редиректом на главную

Это очень просто! Вы только должны запомнить три вещи.

  • Вставьте миниатюрный размер изображения в ссылку.
  • Укажите href ссылку на ваше полноразмерное изображение.
  • Включите модальный класс в ссылку тега.

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

Источник: The Art Of Joomla. COM

и небольшой пример для открытия ДИВа в поп-ап:

<div id="loadDiv">
  A div element containing some text that you want to display.
</div>

Then you can create the link

<a href="#loadDiv" 
class="modal">Click here to load the text in a popup</a>

еще примеры здесь + информация по респонсивным модальным окнам