Перейти к содержанию
Форум поддержки пользователей VamShop
VamShop Смотреть Скачать Купить

Модальное окно (всплывающее окно один раз)

Альбеков Тауфик Равшанович

Автор Альбеков Тауфик Равшанович,
в Проблемы и решения

 Share Подписчики 0

Рекомендуемые сообщения

Альбеков Тауфик Равшанович

Альбеков Тауфик Равшанович 0

Опубликовано
Опубликовано

Подскажите как реализовать всплывающее окошко один раз.

Создал файл в корне шаблона в папке js  main.js

// Модальное окно

// открыть по кнопке
$('.js-button-campaign').click(function() { 
    
    $('.js-overlay-campaign').fadeIn();
    $('.js-overlay-campaign').addClass('disabled');
});

// закрыть на крестик
$('.js-close-campaign').click(function() { 
    $('.js-overlay-campaign').fadeOut();
    
});

// закрыть по клику вне окна
$(document).mouseup(function (e) { 
    var popup = $('.js-popup-campaign');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.js-overlay-campaign').fadeOut();
        
    }
});

// открыть по таймеру 
$(window).on('load', function () { 
    setTimeout(function(){
        if($('.js-overlay-campaign').hasClass('disabled')) {
            return false;
        } else {
            
            $(".js-overlay-campaign").fadeIn();
        }
    }, 5000);
});


--------------------------------------------------

 

записал стили в файл css  vamshop.css

 

/*Модальное окно*/
body {margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; }

main {
    width: 100%;
    height: 100vh;
    background-image: url(bg.jpg);
    background-size: cover;
    transition: all .2s ease;
}

.button {
    width: 300px;
    height: 60px;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    background-color: #ff5252;
    text-align: center;
    cursor: pointer;
} 

.button span {
    line-height: 60px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8);
    display: none;
}

.popup {
    position: absolute;
    width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    box-sizing: border-box;
    background-color: #ff5252;
    color: #fff;
}

.close-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 23px;
    height: 23px;
    cursor: pointer;
}

.close-popup:before {
    content: '';
    background-color: #fff;
    position: absolute;
    height: 1px;
    width: 31px;
    top: 11px;
    left: -4px;
    transform: rotate(-45deg);
}

.close-popup:after {
    content: '';
    background-color: #fff;
    position: absolute;
    height: 1px;
    width: 31px;
    top: 11px;
    transform: rotate(45deg);
    left: -4px;
}

@media screen and (max-width: 768px) {

    .popup {
        width: 100%;
        height: 100vh;
        font-size: 15px;
    }
}

--------------------

Блок с текстов записал через админ панель в блок footer

<div class="overlay js-overlay-campaign">
        <div class="popup js-popup-campaign">
            <h2>Внимание!</h2>
            Воспользуйтесь поиском по сайту
            <div class="close-popup js-close-campaign"></div>
        </div>
    </div>

--------------------------------------

+ в футоре указал путь скрипта /js/main.js


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/main.js"></script>

----------------------------------------------------

окошко появляется но нужно чтобы при обновлении страницы не выводилось всплывающее окно.

нашел пример кода

<script>
  (function($) {
    $(function() {
      if (!$.cookie('smartCookies')) {
 
        function getWindow(){
          $('.offer').arcticmodal({
            closeOnOverlayClick: false,
            closeOnEsc: true
          });
        };
 
        setTimeout (getWindow, 5000);
      }
 
      $.cookie('smartCookies', true, {
        expires: 180,
        path: '/'
      });
 
    })
  })(jQuery)
</script>



Как обьединить 2-а скрипта в один 1 скрипт прописал верху и второй этот.

Ах да нужно еще в футор написать  чтобы узнать, заходил ли к нам пользователь уже или нет, мы можем сделать запись в cookies. Для этого воспользуемся плагином cookies от Яндекса:

<script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>
 

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано
1 час назад, Альбеков Тауфик Равшанович сказал:

Подскажите как реализовать всплывающее окошко один раз.

Создал файл в корне шаблона в папке js  main.js

// Модальное окно

// открыть по кнопке
$('.js-button-campaign').click(function() { 
    
    $('.js-overlay-campaign').fadeIn();
    $('.js-overlay-campaign').addClass('disabled');
});

// закрыть на крестик
$('.js-close-campaign').click(function() { 
    $('.js-overlay-campaign').fadeOut();
    
});

// закрыть по клику вне окна
$(document).mouseup(function (e) { 
    var popup = $('.js-popup-campaign');
    if (e.target!=popup[0]&&popup.has(e.target).length === 0){
        $('.js-overlay-campaign').fadeOut();
        
    }
});

// открыть по таймеру 
$(window).on('load', function () { 
    setTimeout(function(){
        if($('.js-overlay-campaign').hasClass('disabled')) {
            return false;
        } else {
            
            $(".js-overlay-campaign").fadeIn();
        }
    }, 5000);
});


--------------------------------------------------

 

записал стили в файл css  vamshop.css

 

/*Модальное окно*/
body {margin: 0; padding: 0; font-family: Helvetica, Arial, sans-serif; }

main {
    width: 100%;
    height: 100vh;
    background-image: url(bg.jpg);
    background-size: cover;
    transition: all .2s ease;
}

.button {
    width: 300px;
    height: 60px;
    margin: 0 auto;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 3px;
    background-color: #ff5252;
    text-align: center;
    cursor: pointer;
} 

.button span {
    line-height: 60px;
    color: #fff;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
}

.overlay {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .8);
    display: none;
}

.popup {
    position: absolute;
    width: 400px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 40px;
    box-sizing: border-box;
    background-color: #ff5252;
    color: #fff;
}

.close-popup {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 23px;
    height: 23px;
    cursor: pointer;
}

.close-popup:before {
    content: '';
    background-color: #fff;
    position: absolute;
    height: 1px;
    width: 31px;
    top: 11px;
    left: -4px;
    transform: rotate(-45deg);
}

.close-popup:after {
    content: '';
    background-color: #fff;
    position: absolute;
    height: 1px;
    width: 31px;
    top: 11px;
    transform: rotate(45deg);
    left: -4px;
}

@media screen and (max-width: 768px) {

    .popup {
        width: 100%;
        height: 100vh;
        font-size: 15px;
    }
}

--------------------

Блок с текстов записал через админ панель в блок footer

<div class="overlay js-overlay-campaign">
        <div class="popup js-popup-campaign">
            <h2>Внимание!</h2>
            Воспользуйтесь поиском по сайту
            <div class="close-popup js-close-campaign"></div>
        </div>
    </div>

--------------------------------------

+ в футоре указал путь скрипта /js/main.js


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/main.js"></script>

----------------------------------------------------

окошко появляется но нужно чтобы при обновлении страницы не выводилось всплывающее окно.

нашел пример кода

<script>
  (function($) {
    $(function() {
      if (!$.cookie('smartCookies')) {
 
        function getWindow(){
          $('.offer').arcticmodal({
            closeOnOverlayClick: false,
            closeOnEsc: true
          });
        };
 
        setTimeout (getWindow, 5000);
      }
 
      $.cookie('smartCookies', true, {
        expires: 180,
        path: '/'
      });
 
    })
  })(jQuery)
</script>



Как обьединить 2-а скрипта в один 1 скрипт прописал верху и второй этот.

Ах да нужно еще в футор написать  чтобы узнать, заходил ли к нам пользователь уже или нет, мы можем сделать запись в cookies. Для этого воспользуемся плагином cookies от Яндекса:

<script src="//yandex.st/jquery/cookie/1.0/jquery.cookie.min.js"></script>
 

Не надо ничего подключать, уже есть ведь bootstrap окна - https://getbootstrap.com/docs/3.3/javascript/#modals

Есть colorbox уже подключённый - http://www.jacklmoore.com/colorbox/

Просто вставляете js код в /app/webroot/js/vamshop.js нужный и разметку делаете в шаблонах.

Ссылка на сообщение
Поделиться на другие сайты
Альбеков Тауфик Равшанович

Альбеков Тауфик Равшанович 0

Опубликовано
  • Автор
Опубликовано
1 минуту назад, VaM сказал:

Не надо ничего подключать, уже есть ведь bootstrap окна - https://getbootstrap.com/docs/3.3/javascript/#modals

Есть colorbox уже подключённый - http://www.jacklmoore.com/colorbox/

Просто вставляете js код в /app/webroot/js/vamshop.js нужный и разметку делаете в шаблонах.

а что такое разметка в шаблоне )

основной вопрос как должен выглядит код куки чтобы показывался один раз а не постоянно появлялся при обновлении странички.

Ссылка на сообщение
Поделиться на другие сайты
support

support 447

Опубликовано
Опубликовано
2 часа назад, Альбеков Тауфик Равшанович сказал:

а что такое разметка в шаблоне )

основной вопрос как должен выглядит код куки чтобы показывался один раз а не постоянно появлялся при обновлении странички.

Я ж Вам дал ссылку на boostrap сайт.

Там есть пример html-кода модального окна.

javascript код нужен что б открывать это окно, либо по клику, либо при загрузке страницы.

Если нужно с cookies работать, то в VamShop уже есть jQuery Cookie, вот пример выбора цвета оформления - http://support.vamshop.ru/modules/wfdownloads/singlefile.php?cid=4&lid=20

Выбранный цвет записывается в cookie.

Вот описание jQuery Cookie - https://github.com/carhartl/jquery-cookie

т.е. всё уже есть и всё на живых работающих примерах можно посмотреть и сделать.

 

Ссылка на сообщение
Поделиться на другие сайты
 Share
Подписчики 0
Перейти к списку тем
×
×
  • Создать...