Всплывающие окна для uKit со своей информацией

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

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

Отмечу, что в этих окнах некорректно работает виджет "Форма обратной связи" и "Галерея" Вместо галери, вы можете использовать виджет "Картинка": скриншот, а вместо формы обратной связи у uKit есть свои окна с этими формами

Установка

1. Чтобы для ссылки или кнопки у вас открывались всплывающие окна, для нее необходимо установить внутреннюю ссылку, а также в настройках указать "Открывать в новом окне": видео

2. Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте один из следующих кодов:

Первый вариант. (Пример отображения вы можете найти на главной страницы демо):

<script> if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) < console.log('Ты на мобилке: '+navigator.userAgent+''); >else < require(['jquery'], function($) var okno =

// Закрыть $(document).on('click', '#okno .close, #okno_back', function() );

// Клик по ссылке $(document).on('click', 'a[target="_blank"][rel!="nofollow"]', function() >);

// Изменение размеров $(window).resize(function() ); >); > </script> <style> #aDialog #hellopreloader_preload #hellopreloader_preload:before #hellopreloader_preload:after @-webkit-keyframes spin @keyframes spin #okno .content #okno .content::-webkit-scrollbar-track #okno .content::-webkit-scrollbar #okno .content::-webkit-scrollbar-thumb #okno .content:hover::-webkit-scrollbar-thumb #okno_back #okno #okno .content #okno .close #okno .close:before, #okno .close:after #okno .close:before #okno .close:after </style>

Второй вариант. (Пример отображения вы можете найти на второстепенной странице демо: скриншот):

<script> if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) < console.log('Ты на мобилке: '+navigator.userAgent+''); >else < require(['jquery'], function($) var okno = // Клик по ссылке $(document).on('click', 'a[target="_blank"][rel!="nofollow"]', function() );

// Закрыть $(document).on('click', '#okno .close, #okno_back', function() );

// Изменение размеров $(window).resize(function() ); >); > </script> <style> #aDialog #okno_scroll #okno_back #okno #okno .content #okno .close #okno .close:before, #okno .close:after #okno .close:before #okno .close:after </style>

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот). Сохраните код и опубликуйте ваш сайт.

Также на свое усмотрение, вы можете добавить анимации появления окна. Для этого, повторно перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:

#okno /* ---------------------------------------------- * Generated by Animista on 2017-10-11 21:29:44 * w: http://animista.net, t: @cssanimista ---------------------------------------------- /

/** * ---------------------------------------- * animation slide-in-bottom * ---------------------------------------- */ @-webkit-keyframes slide-in-bottom @keyframes slide-in-bottom </style>

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот). Сохраните код и повторно опубликуйте ваш сайт.