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

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

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

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

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

 



Установка

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

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


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

Код

<script>
    require(['jquery'], function($) {
        $('#ul-content').append('<div id="okno_back"></div><div id="okno" style="display:none;"><div class="close"></div><div class="content"></div></div>');
        var okno = {
            close: function() {
                $('#okno, #okno_back').hide();
                $('body').css('overflow', '');
            },
            open: function() {
                $('#okno, #okno_back').show();
                $('body').css('overflow', 'hidden');
            },
            resize: function() {
                if ($('#okno .content *').length > 0) {
                    okno.width = 600;
                    $('#okno .content *').each(function() {
                        if ($(this).innerWidth() > okno.width) okno.width = $(this).innerWidth();
                    });
                    if ($(window).width() < okno.width) {
                        $('#okno .content').css('width', '100%');
                        $('#okno').css({
                            'height': '100%',
                            'top': '0',
                            'left': '0',
                            'width': '100%',
                            'border-radius': '0'
                        });
                    } else {
                        $('#okno').css('height', '');
                        $('#okno .content').css('width', '' + okno.width + 'px');
                        $('#okno').css({
                            'margin-left': '-' + ($('#okno').innerWidth() / 2) + 'px',
                            'margin-top': '-' + ($('#okno').innerHeight() / 2) + 'px'
                        });
                    }
                }
            },
            ajax: function() {
                $.ajax({
                    url: okno.url,
                    type: 'GET',
                    success: function(html) {
                        $('#okno .content').html($('#ul-content', html).html()).attr('style', 'width: 100%;' + $('#body-fict', html).attr('style') + '');
                        okno.old_href = okno.url;
                        okno.resize();
                        if ($('.ul-widget-gallery', html).length > 0) {
                            require(["widget-gallery-view"], function(gal) {
                                gal.init();
                            });
                            if ($('.ul-w-gallery-collage-wrap-horizontal', html).length > 0) {
                                require(["justifiedGallery"], function(jus) {
                                    $(".ul-w-gallery-collage-wrap-horizontal").justifiedGallery();
                                });
                            }
                        }
                        $('#okno .content a').each(function() {
                            if (String($(this).attr('href')).indexOf('#') == 0) $(this).addClass('js-goods-popup-link');
                        });
                    }
                });
            },
            url_blank: function() {
                okno.domen = window.location.href;
                okno.domen = okno.domen.split('/');
                okno.domen = okno.domen[2];
                str_search = String(okno.url);
                if (str_search.indexOf('/') == 0) return false;
                if (str_search.indexOf('' + okno.domen + '') == -1) {
                    return true;
                } else {
                    return false;
                }
            }
        }
        $(document).on('click', '#okno .close, #okno_back', function() {
            okno.close();
        });
        $(document).on('click', 'a[target="_blank"][rel!="nofollow"]', function() {
            okno.url = $(this).attr('href');
            if ($(this).parents('#okno').length == 0 && okno.url_blank() == false) {
                okno.open();
                if (okno.old_href != okno.url) {
                    $('#okno .content').html('<div id="hellopreloader"><div id="hellopreloader_preload"></div></div>');
                    okno.resize();
                    okno.ajax();
                }
                return false;
            }
        });
        $(window).resize(function() {
            okno.resize();
        });
    });
</script>
<style>
    #aDialog {
        z-index: 99999999 !important;
    }

    #hellopreloader_preload {
        display: block;
        position: absolute;
        z-index: 99999;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        background: #bebebe;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        box-shadow: 0px 0px 0px 2000px rgb(255, 255, 255), inset 0px 0px 0px 2000px rgb(255, 255, 255);
    }

    #hellopreloader_preload:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid rgba(0, 0, 0, 0);
        border-top-color: #bebebe;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }

    #hellopreloader_preload:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #bebebe;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }

    @-webkit-keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes spin {
        0% {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }

        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    #okno .content {
        overflow-y: scroll;
        border: 1px solid #bebebe;
        -webkit-overflow-scrolling: touch;
    }

    #okno .content::-webkit-scrollbar-track {
        border-radius: 4px;
    }

    #okno .content::-webkit-scrollbar {
        width: 6px;
    }

    #okno .content::-webkit-scrollbar-thumb {
        cursor: pointer;
        border-radius: 4px;
        background: rgba(189, 189, 189, 0.8);
    }

    #okno .content:hover::-webkit-scrollbar-thumb {
        background: #BDBDBD;
        cursor: pointer;
    }

    #okno_back {
        background: rgba(0, 0, 0, 0.58);
        position: fixed;
        z-index: 3333;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: none;
    }

    #okno {
        left: 50%;
        top: 50%;
        height: 80%;
        position: fixed;
        background: #fff;
        z-index: 999999;
        padding: 20px 30px;
        box-shadow: 0 2px 15px rgba(255, 255, 255, .9);
        border-radius: 8px;
    }

    #okno .content {
        overflow-y: auto;
        width: 600px;
        height: 100%;
        overflow-x: hidden;
        position: relative;
    }

    #okno .close {
        position: absolute;
        top: 15px;
        right: 5px;
        cursor: pointer;
        z-index: 333;
        width: 20px;
        height: 20px;
    }

    #okno .close:before,
    #okno .close:after {
        content: "";
        position: absolute;
        top: 8px;
        left: 2px;
        width: 15px;
        height: 3px;
        background: #555;
    }

    #okno .close:before {
        webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    #okno .close:after {
        webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
</style>

 

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

 

Код

<script>
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ? console.log("Ты на мобилке: " + navigator.userAgent) : require(["jquery"], function(n) {
        n("#ul-content").append('<div id="okno_scroll" style="display:none;"><div id="okno_back"></div><div id="okno"><div class="close"></div><div class="content"></div></div></div>');
        var o = {
            close: function() {
                n("#okno_scroll").hide(), n("body").css("overflow", "")
            },
            open: function() {
                n("#okno_scroll").show(), n("body").css("overflow", "hidden")
            },
            resize: function() {
                n("#okno .content *").length > 0 && (o.width = 600, n("#okno .content *").each(function() {
                    n(this).innerWidth() > o.width && (o.width = n(this).innerWidth())
                }), n(window).width() < o.width ? (n("#okno .content").css("width", "100%"), n("#okno").css({
                    top: "0",
                    left: "0",
                    width: "100%",
                    "border-radius": "0"
                })) : (n("#okno").css("height", ""), n("#okno .content").css("width", "" + o.width + "px"), n("#okno").css({
                    "margin-left": "-" + n("#okno").innerWidth() / 2 + "px"
                })))
            },
            ajax: function() {
                n.ajax({
                    url: o.url,
                    type: "GET",
                    success: function(e) {
                        n("#okno .content").html(n("#ul-content", e).html()).attr("style", "width: 100%;" + n("#body-fict", e).attr("style")), o.old_href = o.url, o.resize(), n(".ul-widget-gallery", e).length > 0 && (require(["widget-gallery-view"], function(n) {
                            n.init()
                        }), n(".ul-w-gallery-collage-img", e).length > 0 && require(["justifiedGallery"], function(o) {
                            n(".ul-w-gallery-collage-img").parent().justifiedGallery()
                        })), n("#okno .content a").each(function() {
                            0 == String(n(this).attr("href")).indexOf("#") && n(this).addClass("js-goods-popup-link")
                        })
                    }
                })
            },
            url_blank: function() {
                return o.domen = window.location.href, o.domen = o.domen.split("/"), o.domen = o.domen[2], str_search = String(o.url), 0 != str_search.indexOf("/") && str_search.indexOf("" + o.domen) == -1
            }
        };
        n(document).on("click", 'a[target="_blank"][rel!="nofollow"]', function() {
            if (o.url = n(this).attr("href"), 0 == n(this).parents("#okno").length && 0 == o.url_blank()) return o.open(), n("html").scrollTop(0), o.old_href != o.url && (n("#okno .content").html(""), o.resize(), o.ajax()), !1
        }), n(document).on("click", "#okno .close, #okno_back", function() {
            o.close()
        }), n(window).resize(function() {
            o.resize()
        })
    })
</script>
<style>
    #aDialog {
        z-index: 99999999 !important
    }

    #okno_scroll {
        overflow-y: auto;
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 999999
    }

    #okno_back {
        background: rgba(0, 0, 0, .58);
        position: fixed;
        z-index: 3333;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0
    }

    #okno {
        left: 50%;
        top: 10%;
        margin-bottom: 30px;
        position: absolute;
        background: #fff;
        z-index: 999999;
        padding: 20px 30px;
        box-shadow: 0 2px 15px rgba(255, 255, 255, .9);
        border-radius: 8px
    }

    #okno .content {
        width: 600px;
        min-height: 300px;
        position: relative;
        overflow: hidden
    }

    #okno .close {
        position: absolute;
        top: 15px;
        right: 5px;
        cursor: pointer;
        z-index: 333;
        width: 20px;
        height: 20px
    }

    #okno .close:after,
    #okno .close:before {
        content: "";
        position: absolute;
        top: 8px;
        left: 2px;
        width: 15px;
        height: 3px;
        background: #555
    }

    #okno .close:before {
        webkit-transform: rotate(45deg);
        transform: rotate(45deg)
    }

    #okno .close:after {
        webkit-transform: rotate(-45deg);
        transform: rotate(-45deg)
    }
</style>

 

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

 

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

Код
<style>

#okno {
 -webkit-animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
         animation: slide-in-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
 * 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 {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slide-in-bottom {
  0% {
    -webkit-transform: translateY(1000px);
            transform: translateY(1000px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
  }
}
</style>


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

 

 

Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 381 2 »
avatar
1
Здравствуйте, подскажите как отключить для мобильной версии, ipad , iphone и т.д.
avatar
0
2
Отключить данный скрипт, вы можете при помощи замены одно из кодов, который вы установили ранее:
Первый вариант: https://ukit.top/file-script/code1.txt
Второй вариант: https://ukit.top/file-script/code2.txt
avatar
3
В смысли? Мне надо отключить его работу только в мобильной версии
avatar
0
4
Опечатался. Отключить скрипт в мобильной версии, вы можете при помощи замены кода, который находится в файлах что я предоставил выше*
avatar
5
Можно сделать так что бы при этом на мобильно открывали страницы в том же окне а не в новой вкладке?
avatar
1
6
При помощи следующего скрипта, вы можете это реализовать:

Код
<script>
   if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){  
console.log('Ты на мобилке: '+navigator.userAgent+'');  
require(['jquery'], function ($) {
$('a[target="_blank"]').each(function() {$(this).removeAttr("target")})
})
}
else{    
}
</script>
avatar
7
Добрый вечер! А подскажите как отключить работу этого виджета на Картинках?
avatar
1
8
avatar
9
Вопрос, а можно что бы виджет магазина работал. В данный момент кнопка "Купить" с виджета магазина не работает.
avatar
0
10
Такое не реализовать sad
avatar
11
Жаль(((
avatar
12
Очень полезный скрипт:-) Большое спасибо разработчику !!!  Подсказал в том , что мне было не понятно , вежливо и доступно!!!
Лойс respect
avatar
13
На одном из сайтов установил и во всплывающем окне открывается большая галерея. А последний раз ставил - не грузится(((
avatar
0
14
Да, действительно галерея может работать на некоторых шаблонах, а вообще вот информация по этому поводу: http://screenshot.ukit.com/src/god3/2017-12-05-15-13-11.png
avatar
19
Ага. Есть косяк - галерея открывается, но при закрытии косячит все - т.е. нет возможности закрыть окно...
avatar
15
Подскажите как отключить работу скрипта на определенные ссылки, у меня на многих страницах, есть переходы на новую вкладку. Мне надо что бы скрипт работал на всех страницах, но не работало пара определенных ссылок. И что бы эти ссылки так же и остались работать по прежнему с переходом на новую вкладку.
avatar
0
16
В настройках ваших ссылок отключите открывать в новом окне, либо код примените на нужные страницы
avatar
17
У меня почти на всех страницах данная ситуация, и нужна работа скрипта на этих страницах. Кодом отключить работу определенных ссылок не можно?
avatar
0
18
Мне необходимо повторить свой ответ? Другого решения нет.
avatar
22
Вот решение
 <script> 
require(['jquery'], function ($) {
$('a[href="ссылка которую нужно отключить"]').attr('target','_self');
})
</script>
avatar
20
Здравствуйте, подскажите пожалуйста, как опустить высоту начала отображения контента в окне
avatar
0
21
Здравствуйте, на странице которую вы установили, как «всплывающее окно» воспользуйтесь виджетом «пробел» поставьте его вначале контента и задайте ему нужную Вам высоту.
avatar
23
Добрый день!
окно открывается не посередине экрана монитора, а на половину,половина окна выходит вне экрана монитора.
У меня на странице много карточек ссылками, нужно,чтобы работала на всех, первое открытие нормально, потом по другим такая проблема выходит, как решить?
avatar
0
24
Здравствуйте! нужен адрес сайта, и ссылка на страницу там,где появляется данный баг. Сайт можете прислать личным сообщением https://screenshot.ukit.com/src/zz/2018-01-18-16-47-33.png
avatar
25
Здравствуйте! разобрался, из-за стороннего скрипта появляется баг
avatar
26
На всплывающее окно, кнопки поделиться выводят не урл той страницы, а главной страницы, как поправить? или это от сервиса зависит?
avatar
0
27
Никак, так как окно это не страница, если вы хотите делится именно страницей, то перейдите на нее.
avatar