Отзывчивое всплывающее окно один раз в день - PullRequest
Новая
       13

Отзывчивое всплывающее окно один раз в день

0 голосов
/ 17 октября 2018

Этот код отображает всплывающее окно один раз в день.Но у меня возникают проблемы с адаптацией, и кажется, что он показывает один раз в жизни ...

Я помещаю его на 3 разные страницы, и если он отображается на одной из них, он не отображаетсяна других страницах. 

let localStorage = {};

if (localStorage.last) {
    if ((localStorage.last - Date.now() ) / (1000*60*60*24) >= 1) {

    // Date.now() is in milliseconds, so convert it all to days, and if
    // it's more than 1 day, show the div

        $(document).ready(function() { 
            var id = '#dialog';
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
 
            $('#mask').css({'width':maskWidth,'height':maskHeight}); 
            $('#mask').fadeIn(500); 
            $('#mask').fadeTo("slow",0.9); 
            var winH = $(window).height();
            var winW = $(window).width();
            $(id).css('top',  winH/2-$(id).height()/2);
            $(id).css('left', winW/2-$(id).width()/2);
            $(id).fadeIn(2000);
 
            $('.window .close').click(function (e) {
                e.preventDefault();
                $('#mask').hide();
                $('.window').hide();
            });
 
            $('#mask').click(function () {
                $(this).hide();
                $('.window').hide();
            });
        });
        localStorage.last = Date.now(); //Reset your timer
    }
} else {
    localStorage.last = Date.now();
    $(document).ready(function() { 
        var id = '#dialog';
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({'width':maskWidth,'height':maskHeight}); 
        $('#mask').fadeIn(500); 
        $('#mask').fadeTo("slow",0.9); 
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top',  winH/2-$(id).height()/2);
        $(id).css('left', winW/2-$(id).width()/2);
        $(id).fadeIn(2000);
 
        $('.window .close').click(function (e) {
            e.preventDefault();
            $('#mask').hide();
            $('.window').hide();
        });
 
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });
    });
}
#mask {
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#26262c;
    display:none;
}  
#boxes .window {
    position:absolute;
    left:0;
    top:0;
    width:440px;
    height:850px;
    display:none;
    z-index:9999;
    padding:20px;
    border-radius: 5px;
    text-align: center;
}
#boxes #dialog {
    width:450px; 
    height:auto;
    padding: 10px 10px 10px 10px;
    background-color:#ffffff;
    font-size: 15pt;
}
.agree:hover{
    background-color: #D1D1D1;
}
.popupoption:hover{
    background-color:#D1D1D1;
    color: green;
}
.popupoption2:hover{
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="boxes">
    <div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
        <div id="san">
            <a href="#" class="close agree">
                <img src="https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-512.png" width="25" style="float:right; margin-right: -10px; margin-top: -10px;" alt="" />
            </a> 
            <br><br>
            Visit our new website: <a style="color:blue" target="_blank" href="www.example.come">Example.com</a>. 
            <br><br><br>&#160;
        </div>
    </div>
    <div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask">&#160;</div>
</div>

РЕДАКТИРОВАТЬ: Я пытался заменить мой JS на этот, но все еще не работал: 

$(document).ready(function() {
            if( $.cookie('showOnlyOne') ){
             console.log("do nothing");
            } else {

                $.cookie('showOnlyOne', 'showOnlyOne', { expires: 1 });

                var id = '#dialog';
              var maskHeight = $(document).height();
              var maskWidth = $(window).width();
              $('#mask').css({'width':maskWidth,'height':maskHeight}); 
              $('#mask').fadeIn(500); 
              $('#mask').fadeTo("slow",0.9); 
                    var winH = $(window).height();
              var winW = $(window).width();
                    $(id).css('top',  winH/2-$(id).height()/2);
              $(id).css('left', winW/2-$(id).width()/2);
                 $(id).fadeIn(2000);  
                 $('.window .close').click(function (e) {
              e.preventDefault();
              $('#mask').hide();
              $('.window').hide();
                 });  
                 $('#mask').click(function () {
                      $(this).hide();
                      $('.window').hide();
                     });  
            }
 });

1 Ответ

0 голосов
/ 17 октября 2018

Одним из решений было бы установить браузер cookie .

Где-то при запуске вашего всплывающего окна вы создаете cookie с датой истечения 24 часов с момента его установки.

Установка cookie с истечением срока действия: 

const tomorrow = new Date();
tomorrow.setDate( tomorrow.getDate() + 1 )
document.cookie = `popupShown=true; expires=${ tomorrow }`;

Вам потребуется добавить некоторую логику для проверки состояния куки перед отображением всплывающего окна.

Что касается ответаможет потребоваться заменить фиксированную ширину на проценты или, по крайней мере, использовать отзывчивые контрольные точки с медиазапросами.

...