×

Если у вас установлен компонент К2, можно использовать его библиотеки  для создания собственного модального(всплывающего) окна с любым контентом.

Для работы необходимы css файл и скрипты(они возможно уже подключены):

$document->addStyleSheet('/media/system/css/modal.css');
$document->addScript('/media/jui/js/bootstrap.min.js');
$document->addScript('/media/system/js/modal.js');

Добавить скрипты инициализации:

<script> 
jQuery('document').ready(function(){
jQuery('#modal').modal("false");
});
 function change_img(imgs) {
 document.getElementById('modal_img').src=imgs;
 }
</script>

Рассмотрим на примере - необходимо вызывать модальное окно для просмотра назначенного изображения материала К2. Нам необходимо добавить функцию обновления ссылки на изображение по щелчку:

<script>
function change_img(imgs) {
 document.getElementById('modal_img').src=imgs;
 }
</script>

Создаем блок со скрытым модальным окном:

<div id="modal" class="modal hide fade" class="modal hide fade in" style="display: none;" aria-hidden="false">
 <div class="modal-header" style="min-height: 21px;">
 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
 </div>
 <div class="modal-body" style="min-height:300px;text-align:center!important;">
 <img id="modal_img" style="max-width:1100px;max-height: 400px;" src="/">
 </div>
</div>

Стили можно менять в файл /media/system/css/modal.css , либо назначить принудительно, как в примере.

Вызов формируется так:

<a href="#modal" onclick="change_img('/media/k2/items/cache/<?php echo md5("Image".$item->id);?>_XL.jpg')" role="button"data-toggle="modal">Click Me</a>

Пример :

Click Me