Новосибирск +7(983)

По всем вопросам :

Телеграм : @radgura

Собственное модальное окно с использованием библиотек К2

Если у вас установлен компонент К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

Комментарии (0)

Здесь ещё нет оставленных комментариев.

Оставьте свой комментарий

  1. Добавление комментария от гостя.
Вложения (0 / 3)
Share Your Location

Как с нами связаться

По всем вопросам пишите  

Телеграм: @radgura

OnLine заказ

Отправить сообщение

Нажимая на кнопку «Отправить сообщение», я соглашаюсь:
* с условиями публичной оферты
* обработку моих персональных данных


RAD компоненты

Please publish modules in offcanvas position.