JS localStorage модальное окно по кнопке

Question

Подскажите пожалуйста, в чем у меня проблема.

При загрузке страницы у меня открывается модальное окно с вопросом "есть ли 18 лет?", при нажатие на кнопку "ДА", сохраняются данные в localStorage и окно не открывается в случаем переходов по сайту.

Но постоянно моргает если обновлять страницу. Как мне исправить данную проблему ?

Мой код:

$(document).ready(function(){
  if(localStorage.getItem('ConfirmationOfAge')=='1')
  $('#COA').remove();
});

$('#COA').find('.COA-button button').on('click',function(){
  if($(this).hasClass('COA-button--yes')){
    localStorage.setItem('ConfirmationOfAge','1');
    $('#COA').remove();
  }
  if($(this).hasClass('COA-button--no'))
    location.href = 'http://www.yandex.ru/';
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="COA" class="COA">
    <div class="COA-overlay"></div>

    <div class="COA-form bg-white rounded-0 text-dark">
        <div class="text-center pb-3">
            Вам есть есть 18 ?
        </div>
        <div class="row text-center COA-button">
            <div class="col-md-6 col-12 py-2">
                <button class="COA-button--yes btn btn-bronze rounded-0 my-1 mobilebutton">Да есть 18</button>
            </div>
            <div class="col-md-6 col-12 py-2">
                <button class="COA-button--no btn btn-dark rounded-0 my-1 mobilebutton">Мне нет 18</button>
            </div>
        </div>

    </div>

</div>

Так же код в редакторе: https://jsfiddle.net/synapse3/wy763qx5/ Так же пример по ссылке: http://test.synapsepro.site/test2/

Answer 1

Можно пойти от обратного: изначально окно скрыто и если нет в localStorage ничего, то показывать окно

Answer 2

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="COA" class="COA" style='display:none;'>
    <div class="COA-overlay"></div>

    <div class="COA-form bg-white rounded-0 text-dark">
        <div class="text-center pb-3">
            Вам есть есть 18 ?
        </div>
        <div class="row text-center COA-button">
            <div class="col-md-6 col-12 py-2">
                <button class="COA-button--yes btn btn-bronze rounded-0 my-1 mobilebutton">Да есть 18</button>
            </div>
            <div class="col-md-6 col-12 py-2">
                <button class="COA-button--no btn btn-dark rounded-0 my-1 mobilebutton">Мне нет 18</button>
            </div>
        </div>

    </div>

</div>

$(document).ready(function(){
  if(localStorage.getItem('ConfirmationOfAge')=='0') {
     $('#COA').show();
  } else {
     $('#COA').hide();
  }
});

$('#COA').find('.COA-button button').on('click',function(){
  if($(this).hasClass('COA-button--yes')){
    localStorage.setItem('ConfirmationOfAge','1');
    $('#COA').remove();
  }
  if($(this).hasClass('COA-button--no'))
    location.href = 'http://www.yandex.ru/';
});

Окно должно существовать, но быть скрытым (display: none) в Jquery проверяешь отвечал ли пользователь... если да, то оставляешь скрытым если нет, открываешь окно $('#COA').show();

БЛОГ НА HUSL

JS localStorage модальное окно по кнопке

Ответы (2 шт):