Скрыть объявление
ВАШИ ПРАВА ОГРАНИЧЕНЫ!

Зарегистрируйтесь на форуме, чтобы стать полноценным участником сообщества!

Куплю скрипт модульного окна

Тема в разделе "Вопросы по шаблонам DLE", создана пользователем iroder, 3 май 2020.

03.05.20 в 14:43
27.07.21 в 17:20
3
4.330
0
  1. TopicStarter Overlay
    iroder

    iroder Бывалый

    Регистрация:
    7 июн 2015
    Сообщения:
    250
    Лучших ответов:
    0
    Рейтинги:
    +32 / 9 / -0
  2. Kandi

    Kandi Бывалый

    Регистрация:
    19 апр 2019
    Сообщения:
    296
    Лучших ответов:
    1
    Рейтинги:
    +73 / 25 / -0
  3. TeraMoune

    TeraMoune Бывалый

    Регистрация:
    6 апр 2019
    Сообщения:
    310
    Лучших ответов:
    3
    Рейтинги:
    +130 / 9 / -0
    Не слишком это и скрипт, просто условие js на проверку наличия cookie с ключём 18plus
    Код:
    //Функции для установки и получения куков взятые с публичного источника
    //Место им рядом с другими аналогичными функциями и они должны быть доступны везде и всегда
    function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
    function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
    
    Этот код должен срабатывать всякий раз когда человек заходит на страницу
    Код:
    //Условие проверки, если значение не равно 1 исполняем код, так же код будет исполнен если куков нету и был первый вход на сайт.
    if ( getcookie( "18plus" ) != "1" ){
    
    /*
    Код выводящий модульное окно какого-то плагина, в функции вызова модального окна обычно предусмотрены различные колбэки, на разные действия в них повесить на нажатие кнопки которая будет выбрана (ДА) установить значение cookie и закрыть окно.
    пример установки значения
    setcookie( "18plus", "1" );
    */
    }
    

    Ну или вот еще.
    Сохранить в файл, подключить в нужном разделе.
    Код:
    function setcookie(a,b,c) {if(c){var d = new Date();d.setDate(d.getDate()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
    function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
    $(function() {
    
        var template = "<div class=\"modal-status\">"+
                            "<div class=\"modal-status__grid-container\">"+
                                "<div class=\"modal-status__grid-container-inner\">"+
                                    "<div class=\"modal-status__content\">"+
                                        "<div class=\"modal-status__title\">Вам уже есть 18&nbsp;лет?</div>"+
                                        "<div class=\"modal-status__description\">Доступ к&nbsp;этому видео разрешён только совершеннолетним пользователям</div>"+
                                    "</div>"+
                                    "<div class=\"modal-status__buttons-block\">"+
                                        "<button id=\"js-erotic-deny\" class=\"button button_size_shinnok button_style_ran button_short modal-status__button modal-status__button_short\"><span class=\"button__primaryText\">Нет</span></button>"+
                                        "<button id=\"js-erotic-confirm\" class=\"button button_size_shinnok button_style_kioshi button_short modal-status__button modal-status__button_short\"><span class=\"button__primaryText\">Да</span></button>"+
                                    "</div>"+
                                "</div>"+
                            "</div>"+
                        "</div>";
    
        if ( getcookie( "18plus" ) != "1" ) {
           
            $('body').append(template);
           
            $('#js-erotic-deny').on('click', function(){
               
                window.location.href = "/";
               
            });
           
            $('#js-erotic-confirm').on('click', function(){
               
                setcookie("18plus", 1);
                window.location.reload();
               
            });      
           
        }
       
    });
    Стили подчистил с большего, чтобы окно отображалось как и на ivi. Но если что допиливайте сами.
    Код:
    .modal-status {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        color: #fff;
        background: #AAA;
        z-index: 99999;  
    }
    
    .modal-status__grid-container {
        height: 100%
    }
    
    @media screen and (min-width:1280px) {
        .modal-status__grid-container {
            width: 1216px;
            margin-left: auto;
            margin-right: auto
        }
        .modal-status__grid-container-inner {
            margin-left: -12px;
            margin-right: -12px
        }
    }
    
    @media screen and (min-width:600px) and (max-width:1279px) {
        .modal-status__grid-container {
            width: auto;
            margin-left: 20px;
            margin-right: 20px
        }
    }
    
    @media screen and (max-width:599px) {
        .modal-status__grid-container {
            width: auto;
            margin-left: 16px;
            margin-right: 16px
        }
    }
    
    .modal-status__grid-container-inner {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        min-height: 100%
    }
    
    .modal-status__grid-container-inner:-ms-fullscreen,
    :root .modal-status__grid-container-inner {
        height: 100%
    }
    
    .modal-status__content {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-flex-shrink: 0;
        -ms-flex-negative: 0;
        flex-shrink: 0;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: relative
    }
    
    body.touch .modal-status__content {
        -webkit-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex-positive: 1;
        flex-grow: 1
    }
    
    @media screen and (min-width:1160px) {
        .modal-status__content {
            width: 50%;
            margin-left: 25%
        }
    }
    
    @media screen and (min-width:880px) and (max-width:1159px) {
        .modal-status__content {
            width: 66.66666667%;
            margin-left: 16.66666667%
        }
    }
    
    @media screen and (min-width:600px) and (max-width:879px) {
        .modal-status__content {
            width: 100%
        }
    }
    
    @media screen and (min-width:512px) and (max-width:599px) {
        .modal-status__content {
            width: 100%
        }
    }
    
    @media screen and (min-width:392px) and (max-width:511px) {
        .modal-status__content {
            width: 100%
        }
    }
    
    @media screen and (max-width:391px) {
        .modal-status__content {
            width: 100%
        }
    }
    
    @media screen and (min-width:600px) {
        .modal-status__content {
            padding-left: 12px;
            padding-right: 12px
        }
    }
    
    @media screen and (max-width:599px) {
        .modal-status__content {
            padding-left: 8px;
            padding-right: 8px
        }
    }
    
    @media screen and (min-width:600px) {
        .modal-status__content {
            padding-top: 48px;
            margin-bottom: 32px
        }
    }
    
    @media screen and (max-width:599px) {
        .modal-status__content {
            padding-top: 24px;
            margin-bottom: 24px
        }
    }
    
    
    .modal-status__caption {
        color: #968acf;
        font-size: 16px;
        line-height: 24px;
        font-weight: 400;
        font-style: normal
    }
    
    .modal-status__buttons-block,
    .modal-status_vpk .modal-status__buttons-block {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box
    }
    
    @media screen and (min-width:1160px) {
        .modal-status__buttons-block {
            width: 50%;
            margin-left: 25%
        }
    }
    
    @media screen and (min-width:880px) and (max-width:1159px) {
        .modal-status__buttons-block {
            width: 66.66666667%;
            margin-left: 16.66666667%
        }
    }
    
    @media screen and (min-width:600px) and (max-width:879px) {
        .modal-status__buttons-block {
            width: 100%
        }
    }
    
    @media screen and (min-width:512px) and (max-width:599px) {
        .modal-status__buttons-block {
            width: 100%
        }
    }
    
    @media screen and (min-width:392px) and (max-width:511px) {
        .modal-status__buttons-block {
            width: 100%
        }
    }
    
    @media screen and (max-width:391px) {
        .modal-status__buttons-block {
            width: 100%
        }
    }
    
    @media screen and (min-width:600px) {
        .modal-status__buttons-block {
            padding-left: 12px;
            padding-right: 12px
        }
    }
    
    @media screen and (max-width:599px) {
        .modal-status__buttons-block {
            padding-left: 8px;
            padding-right: 8px
        }
    }
    
    @media screen and (min-width:512px) {
        .modal-status__buttons-block {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex
        }
    }
    
    @media screen and (max-width:511px) {
        .modal-status__buttons-block {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column
        }
    }
    
    @media screen and (max-width:599px) {
        .modal-status__buttons-block {
            padding-bottom: 24px
        }
    }
    
    @media screen and (min-width:600px) {
        .modal-status__buttons-block {
            padding-bottom: 32px
        }
    }
    
    @media screen and (max-width:511px) {
        .modal-status__button+.modal-status__button {
            margin-top: 16px
        }
    }
    
    @media screen and (min-width:512px) and (max-width:599px) {
        .modal-status__button+.modal-status__button {
            margin-left: 16px
        }
    }
    
    @media screen and (min-width:600px) {
        .modal-status__button+.modal-status__button {
            margin-left: 24px
        }
    }
    
    .modal-status__button_short {
        min-width: 152px
    }
    
    body.touch .modal-status__button {
        width: 100%
    }
    
    @media screen and (min-width:880px) {
        body.touch .modal-status__button:first-child:last-child {
            width: -webkit-calc(50% - 24px);
            width: calc(50% - 24px)
        }
    }
    
    .button {
        position: relative;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        border: 2px solid;
        font-family: iviSans, Arial, Helvetica, Helvetica Neue, FreeSans, sans-serif;
        font-size: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        outline: 0;
        -webkit-tap-highlight-color: transparent;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }
    
    .button:not(:hover):not(:active) {
        -webkit-transition: border-color 400ms, background-color 400ms, opacity 400ms, border-color 400ms, background-color 400ms, opacity 400ms;
        -o-transition: border-color 400ms, background-color 400ms, opacity 400ms, border-color 400ms, background-color 400ms, opacity 400ms;
        transition: border-color 400ms, background-color 400ms, opacity 400ms, border-color 400ms, background-color 400ms, opacity 400ms
    }
    
    .button:hover:not(:active) {
        -webkit-transition: border-color 80ms, background-color 80ms, opacity 80ms, border-color 80ms, background-color 80ms, opacity 80ms;
        -o-transition: border-color 80ms, background-color 80ms, opacity 80ms, border-color 80ms, background-color 80ms, opacity 80ms;
        transition: border-color 80ms, background-color 80ms, opacity 80ms, border-color 80ms, background-color 80ms, opacity 80ms
    }
    
    .button:active {
        -webkit-transition: border-color 80ms, background-color 80ms, opacity 80ms, border-color 80ms, background-color 80ms, opacity 80ms;
        -o-transition: border-color 80ms, background-color 80ms, opacity 80ms, border-color 80ms, background-color 80ms, opacity 80ms;
        transition: border-color 80ms, background-color 80ms, opacity 80ms, border-color 80ms, background-color 80ms, opacity 80ms
    }
    
    .button_size_shinnok {
        height: 40px;
        border-radius: 4px;
        padding: 8px 16px
    }
    
    .button_size_shinnok .button__icon {
        top: 2px;
        margin-right: 6px
    }
    .button_size_shinnok .button__primaryText {
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        font-style: normal
    }
    
    .button_size_shinnok .button__secondaryText {
        display: none
    }
    
    .button_size_shinnok .button__bulb {
        position: absolute;
        right: 2px;
        top: 2px
    }
    
    
    
    body:not(.touch) .button_style_kioshi:not(.button_disabled):not(:disabled):hover:not(:active) {
        background-color: #f93367;
        border-color: #f93367
    }
    
    .button_style_kioshi:not(.button_disabled):not(:disabled):not(:hover):not(:active),
    body.touch .button_style_kioshi:not(.button_disabled):not(:disabled):hover:not(:active) {
        background-color: #f8104d;
        border-color: #f8104d
    }
    
    .button_style_kioshi:not(.button_disabled):not(:disabled):active {
        background-color: #d9063e;
        border-color: #d9063e
    }
    
    .button_style_kioshi.button_disabled,
    .button_style_kioshi:disabled {
        background-color: #f8104d;
        border-color: #f8104d;
        opacity: .32
    }
    
    .button_style_kioshi .button__primaryText {
        color: #fff
    }
    
    .button_style_kioshi .button__secondaryText {
        color: rgba(255, 255, 255, .72)
    }
    
    .button_style_kioshi .button__striked {
        color: rgba(255, 255, 255, .48)
    }
    
    .button_style_kioshi .button__striked::after {
        background-color: #fff
    }
    
    .button_style_kioshi .button__icon {
        color: #fff
    }
    
    body:not(.touch) .button_style_ran:not(.button_disabled):not(:disabled):hover:not(:active) {
        background-color: transparent;
        border-color: rgba(255, 255, 255, .72)
    }
    
    .button_style_ran:not(.button_disabled):not(:disabled):not(:hover):not(:active),
    body.touch .button_style_ran:not(.button_disabled):not(:disabled):hover:not(:active) {
        background-color: transparent;
        border-color: rgba(255, 255, 255, .32)
    }
    
    .button_style_ran:not(.button_disabled):not(:disabled):active {
        background-color: rgba(255, 255, 255, .08);
        border-color: rgba(255, 255, 255, .72)
    }
    
    .button_style_ran.button_disabled,
    .button_style_ran:disabled {
        background-color: transparent;
        border-color: rgba(255, 255, 255, .32);
        opacity: .48
    }
    
    .button_style_ran .button__primaryText {
        color: #fff
    }
    
    .button_style_ran .button__secondaryText {
        color: rgba(255, 255, 255, .72)
    }
    
    .button_style_ran .button__striked {
        color: rgba(255, 255, 255, .48)
    }
    
    .button_style_ran .button__striked::after {
        background-color: #fff
    }
    
    .button_style_ran .button__icon {
        color: #fff
    }
    
     
    #3 TeraMoune, 3 май 2020
    Последнее редактирование: 4 май 2020
    • Нравится Нравится x 1
  4. Nicko1ai

    Nicko1ai Зелёный

    Регистрация:
    27 июл 2021
    Сообщения:
    1
    Лучших ответов:
    0
    Рейтинги:
    +0 / 0 / -0
    • Не согласен Не согласен x 1
Яндекс.Метрика