Сразу хочу оговориться, что данная информация актуальна для всех версий Joomla от 1.5 до 3.5. Т. к. речь идет о предустановленной JavaScript-библиотеке «SqueezeBox». Оговорка связана с тем, что эта библиотека опирается на библиотеку MooTools, от поддержки которой разработчики Joomla стремятся полностью отказаться, кажется уже в 4-й версии, переводя Joomla на библиотеку jQuery.
Лежит эта JavaScript-библиотека по адресу корень сайта/media/system/js/modal.js.
CSS-файл (может пригодится для смены дизайна всплывающего оена) – по адресу media/system/css/modal.css.
Вообще, адрес сайта разработчика «SqueezeBox» http://digitarald.de/project/squeezebox ... squeezebox
Только, в Joomla по умолчанию во фронтэнде эта библиотека не подключена. Подключить её просто: один из способов в файле index.php шаблона до начала вывода разметки, в тегах <?php ... ?> вызвать статический метод:
- Код: Выделить всё
JHTML::_('behavior.modal');
Тем , кто хочет глубже разобраться, рекомендую посмотреть метод modal класса JHtmlBehavior (в файле /libraries/cms/html/behavior.php, у Joomla! 3 он по такому адресу), там, в частности, видно, как происходит инициализация JavaScript-объекта SqueezeBox.
Помимо самой библиотеки SqueezeBox, подключаются MooTools и ... jQuery, да-да jQuery используется для инициализации javascript-объекта SqueezeBox, парсинга атрибутов, вот такой Mooдизмtools. Переходный период, что поделаешь..
В качестве селектора, на который навешивается обработчик клика для открытия модального окна в Joomla, по умолчанию назначены ссылки с классом modal.
Вообще, вот код инициализации в методе modal класса JHtmlBehavior::
- Код: Выделить всё
public static function modal($selector = 'a.modal', $params = array())
{
$document = JFactory::getDocument();
// Load the necessary files if they haven't yet been loaded
if (!isset(static::$loaded[__METHOD__]))
{
// Include MooTools framework
static::framework(true);
// Load the JavaScript and css
JHtml::_('script', 'system/modal.js', true, true);
JHtml::_('stylesheet', 'system/modal.css', array(), true);
}
$sig = md5(serialize(array($selector, $params)));
if (isset(static::$loaded[__METHOD__][$sig]))
{
return;
}
// Setup options object
$opt['ajaxOptions'] = (isset($params['ajaxOptions']) && (is_array($params['ajaxOptions']))) ? $params['ajaxOptions'] : null;
$opt['handler'] = (isset($params['handler'])) ? $params['handler'] : null;
$opt['parseSecure'] = (isset($params['parseSecure'])) ? (bool) $params['parseSecure'] : null;
$opt['closable'] = (isset($params['closable'])) ? (bool) $params['closable'] : null;
$opt['closeBtn'] = (isset($params['closeBtn'])) ? (bool) $params['closeBtn'] : null;
$opt['iframePreload'] = (isset($params['iframePreload'])) ? (bool) $params['iframePreload'] : null;
$opt['iframeOptions'] = (isset($params['iframeOptions']) && (is_array($params['iframeOptions']))) ? $params['iframeOptions'] : null;
$opt['size'] = (isset($params['size']) && (is_array($params['size']))) ? $params['size'] : null;
$opt['shadow'] = (isset($params['shadow'])) ? $params['shadow'] : null;
$opt['overlay'] = (isset($params['overlay'])) ? $params['overlay'] : null;
$opt['onOpen'] = (isset($params['onOpen'])) ? $params['onOpen'] : null;
$opt['onClose'] = (isset($params['onClose'])) ? $params['onClose'] : null;
$opt['onUpdate'] = (isset($params['onUpdate'])) ? $params['onUpdate'] : null;
$opt['onResize'] = (isset($params['onResize'])) ? $params['onResize'] : null;
$opt['onMove'] = (isset($params['onMove'])) ? $params['onMove'] : null;
$opt['onShow'] = (isset($params['onShow'])) ? $params['onShow'] : null;
$opt['onHide'] = (isset($params['onHide'])) ? $params['onHide'] : null;
// Include jQuery
JHtml::_('jquery.framework');
if (isset($params['fullScreen']) && (bool) $params['fullScreen'])
{
$opt['size'] = array('x' => '\jQuery(window).width() - 80', 'y' => '\jQuery(window).height() - 80');
}
$options = JHtml::getJSObject($opt);
// Attach modal behavior to document
$document
->addScriptDeclaration(
"
jQuery(function($) {
SqueezeBox.initialize(" . $options . ");
SqueezeBox.assign($('" . $selector . "').get(), {
parse: 'rel'
});
});
function jModalClose() {
SqueezeBox.close();
}"
);
А вот параметры инициализации JS-объекта SqueezeBox (файл /media/system/js/modal.js):
- Код: Выделить всё
presets: {
onOpen: function(){},
onClose: function(){},
onUpdate: function(){},
onResize: function(){},
onMove: function(){},
onShow: function(){},
onHide: function(){},
size: {x: 600, y: 450},
sizeLoading: {x: 200, y: 150},
marginInner: {x: 20, y: 20},
marginImage: {x: 50, y: 75},
handler: false,
target: null,
closable: true,
closeBtn: true,
zIndex: 65555,
overlayOpacity: 0.7,
classWindow: '',
classOverlay: '',
overlayFx: {},
resizeFx: {},
contentFx: {},
parse: false, // 'rel'
parseSecure: false,
shadow: true,
overlay: true,
document: null,
ajaxOptions: {}
}
В общем, с настройками по умолчанию, для того чтобы создать эффект всплывающего окна с каким-либо содержимым, нужно создать ссылку, присвоить ей CSS-класс "modal", если вам нужно загрузить в сплывающее окно изображение или HTML-страницу со своего сайта, то можно дополнительных параметров не указывать, только указать нужный атрибут src у ссылки, всё должно заработать. Если, например, нужно загрузить в модальное окно видео, то самый простой способ – задать в параметрах обработчик iframe. Параметры задаются через атрибут rel ссылки в виде JSON нотации.
Например, код ссылки, открывающей ролик с Youtube:
- Код: Выделить всё
<a href="https://www.youtube.com/embed/I3t8qw6MGtE" class="modal" rel="{handler:'iframe',size:{x:840,y:550}}">аналитик Лидия Аркадьевна.</a>
Естественно, можно указывать параметры окна, которые указаны в пресетах объекта SqueezeBox, здесь все я разбирать смысла не вижу, для того в код смотреть и предлагаю.
Скажу только, что в окно можно загрузить содержимое какого-либо DOM-элемента со страницы, для этого ему нужно назначить атрибут id, а в качестве атрибута src ссылки, открывающей окно нужно указать этот id. Например:
- Код: Выделить всё
<a href="#div1" class="modal" rel="size:{x:840,y:550}}">Открыть модальное окно с содержимым div, имеющего id div1</a>