Как скрывать блок раз и навсегда

239
22 сентября 2017, 19:39

Здравствуйте, стоит задача чтобы скрывать блок раз и навсегда, допустим человек зашедший первый раз на сайт его увидел и если он нажмет на кнопку "закрыть" то чтобы это блок больше не появлялся при обновлении страницы, то есть надо заносить данные, что он скрыт в куки. Я пытался это сделать так, но не знаю вообще с чего начать правильно и чем закончить

$('.info__btn').on('click', function() {
    $(this).parent().hide(200);
 });
    if(!Cookie().get('offer')) { $('.info').hide(); }


<div class="info">
            <div class="info__btn">Закрыть</div>
        </div>
Answer 1

Вариант с php

 <script>
            $('.info__btn').on('click', function() {
               $('html').append("<?=$_COOKIE['info__btn']='true';?>");
             });
            </script>
            <?if(!$_COOKIE['info__btn'])
            {?>
            <div class="info">
            <div class="info__btn">Закрыть</div>
             </div>
            <?}

Вариант с js:

        <div class="info" style="display:none">
        <div class="info__btn">Закрыть</div>
        </div>

    <script>
 $(document).ready(function(){
    if(!$.cookie('info__btn'))$('.info').show();
        $('.info__btn').on('click', function() {
        $.cookie('info__btn', 'true');
        });
    })
        </script>
    <script type="text/javascript" src="https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js" ></script>
Answer 2

// Собственно сама функция которая работает с Cookie'сами 
const Cookie = { 
  get: function( name ) { 
    var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); 
 
    return matches ? decodeURIComponent(matches[1]) : undefined; 
  }, 
  set: function( name, value, options ) { 
    options = options || {}; 
 
    var expires = options.expires; 
 
    if (typeof expires == "number" && expires) { 
      var d = new Date(); 
      d.setTime(d.getTime() + expires * 1000); 
      expires = options.expires = d; 
    } 
 
    if (expires && expires.toUTCString) { 
      options.expires = expires.toUTCString(); 
    } 
 
    value = encodeURIComponent(value); 
 
    var updatedCookie = name + "=" + value; 
 
    for (var propName in options) { 
      updatedCookie += "; " + propName; 
      var propValue = options[propName]; 
      if (propValue !== true) { 
        updatedCookie += "=" + propValue; 
      } 
    } 
 
    document.cookie = updatedCookie; 
 
    return null; 
  }, 
  delete: function( name ) { 
    Cookie().set(name, '', {expires: -1}); 
 
    return null; 
  } 
}; 
 
// Наш обработчик всего этого безобразия (хотя лучше бы на беке делать) 
$(() => { 
  const $info = $('.info'), 
    $infoButton  = $info.find('.info__btn'); 
     
  /* 
  * Проверяем есть ли в куках то что нам нужно 
  */ 
  if(Cookie.get('offer') !== 'accept') { 
    /* 
    * Если нет, то добавляем нашему блоку класс .show, что бы он отображался 
    * И вешаем обработчик нажатия кнопки 
    */ 
    $info.addClass('show'); 
     
    $infoButton.on('click', () => { 
      Cookie.set('offer', 'accept'); 
      $info.hide(); 
    }); 
  } else { 
    /* 
    * Если есть, то просто удаляем наш блок 
    */ 
    $info.remove(); 
  } 
});
.info { display: none; } // Скрываем блок по дефолту 
 
.info.show { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="info"> 
  <div class="info__btn">Закрыть</div> 
</div>

READ ALSO
Прерывании функции с циклом for Jquery

Прерывании функции с циклом for Jquery

Есть событие которые навешано на кнопку:

349
Openshift редактирование конфигурационных файлов Tomcat, Mysql

Openshift редактирование конфигурационных файлов Tomcat, Mysql

Всем привет, начал пользоваться облачными плюшками, всё отлично, но, есть один непонятный моментУ меня приложение Tomcat и база Mysql, чтобы настроить...

259
Вопрос по установке MySql

Вопрос по установке MySql

При установке сервера MySql сначала требовал установить Visual StudioVisual Studio требовала установить NET Framework

490