Когда пользователь закрывает a, скройте его на всех страницах сайта

После @загрузки.. ответ:

Поля предупреждений всегда ненадолго появляются при перезагрузке, прежде чем исчезнуть. Есть идеи?

Почему это?

Функции внутри $(document).ready() будут выполняться до тех пор, пока не будет загружен весь DOM. Вот почему отображаются предупреждения, а затем, как только функция запускается, она скрывает их.

Решение:

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

Класс, который мы используем, просто устанавливает свойство display: none;.

.hidden {
  display: none;
}

Это, конечно, приведет к перерисовке в браузере. (см. Примечания)

Ваша логика уже показывает предупреждение с

    if (localStorage.getItem('desiredTime') >= currentTime) {
      $('#alert-box-news').hide();
    } else {
      $('#alert-box-news').show();
    }

Поскольку использование .show() добавит встроенный стиль display: block;, он будет иметь более высокую специфичность, чем класс .hidden, показывающий тревога.

Jсфиддл

Примечания:

• Использование display: none; приведет к перемещению содержимого под предупреждением вверх или вниз. Вы можете использовать другие методы, если хотите, например visibility: hidden; или transform, что не входит в рамки этого ответа.

  ---

ИЗМЕНИТЬ:

Ниже будет представлена иллюстрация выполнения следующих шагов:

• Демонстрационный счетчик увеличен до 20 секунд для тестирования.
• Мы нажимаем, чтобы отключить предупреждение и запустите функцию localStorage, установив клавишу desiredTime.
• После установки ключа мы обновляем браузер и несколько раз нажимаем "Выполнить", чтобы проверить, работает ли ключ.

• Наконец, просто чтобы проверить, что ключ действительно установлен, мы переходим к:

  Инструменты разработки (F12) - > Вкладка Приложения ->Локальное хранилище -> Оболочка jsFiddle.

• Запуск выполняется еще раз, после завершения обратного отсчета, показывая предупреждение снова.

Иллюстрация:

Нам может потребоваться дополнительная информация, чтобы решить проблему с помощью этого подхода, если он не работает в реальном времени.

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

Я предполагаю, что вы загружаете эти предупреждения из какой-то базы данных. Если это так, правильным ответом было бы сохранить там статус. Будь то столбец status или временная метка deleted_at, реализации бесконечны.

В любом случае, я бы сохранил состояние оповещения в базе данных и отфильтровал ваши данные, когда тянет соответственно.

Таким образом, по вашему мнению, у вас было бы (при условии, что здесь php):

<?php

<?php if(!empty($newlyFilteredAlerts)): ?>
    <article class="alert-box" id="alert-box-news">
        <h1>News Alerts</h1>
        <?php foreach(newlyFilteredAlerts as $alert): ?>
            <p><?= $alert ?></p>
        <?php endforeach;?
        <a class="alert-box-close" id="close-alert-box-news">
          <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt=""  >
        </a>
    </article>
<?php endif; ?>

Тогда вы, соответственно, захотите добавить какую-то конечную точку, чтобы изменить статус этой базы данных:

$(document).ready(function() {
    $("#close-alert-box-news").click(function() {
        $.post({
            url: '/alerts',
            type: 'DELETE',
            success: function () {
                $("#alert-box-news").hide(800);                    
            },
        });
    });
});

ПРИМЕЧАНИЕ: Этот ответ предназначен для того, чтобы указать вам правильное направление, а не для написания вашего кода. Весь приведенный выше код полностью непроверен, поэтому, если вы просто скопируете и вставите его , может не сработать.

Это не будет работать в stackoverflow. вы можете протестировать в демо-ссылке

Демо-версия

$(document).ready(function() {
  checkCookie("alertDisplayed")
  $("#close-alert-box-news").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie("alertDisplayed", 'yes', 1);
    $(".alert-box").hide(800);
  });
});

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
  var expires = "expires=" + d.toUTCString();
  document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function checkCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for (var i = 0; i < ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      $(".alert-box").hide();
    }
  }
  return;
}

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}
.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Попробуйте это решение jsfiddle и прочитайте комментарии относительно пути хранения. Если вы работаете над sub domain, то вам необходимо указать домен в файле cookie, написанном, как в комментариях setCookie(). если вы working on localhost, то домен cookie должен быть установлен в "" или NULL или FALSE вместо "localhost". Для справки по домену вы можете изучить этот вопрос о стековом потоке

function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    // document.cookie = cname + "=" + cvalue + ";" + expires + ";domain=.example.com;path=/"; if you are trying in any sub-domain
} 
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}
$(document).ready(function() {
  if(getCookie('news')==1) { //check if cookie news exist if exist then hide.
    $("#alert-box-news").hide();
  }
  if(getCookie('maintenance')==1) { //check if cookie maintenance exist if exist then hide.
    $("#alert-box-maintenance").hide();
  }
  $("#close-alert-box-news").click(function() {
    setCookie('news',1,1); // set cookie news to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").click(function() {
    setCookie('maintenance',1,1); // set cookie maintenance to 1 for 1 day = 24 hours here setCookie(key,value,number of cookie expiration day)
    $("#alert-box-maintenance").hide(800);
  });
});

Это возможно с помощью sessionStorage javascript.

Для примера:

Храните текущую дату (var currentDate) и дату через одну минуту (var afterOneMinute) в хранилище сеансов. Каждый щелчок по кнопке или перезагрузка страницы, изменение текущей даты и сравнение их с переменной afterOneMinute и после скрытия или отображения окна

Html-Файл

<head>
    <script src="jquery.js"></script>
</head>
<body>
<button onclick="hideOneMinute()">Hide box while 1 minute </button>
<div id="box" style="border: 1px solid red; display: inherit">
    <h2>Box</h2>
    hello
</div>
<div id="messageBox"></div>
</body>

JS

<script>
    var currentDate, afterOneMinute;
    function addDate(){
        var current = new Date();
        // Converts current date in seconds
        currentDate = current.getHours()*3600+current.getMinutes()*60+current.getSeconds();
        // Current date + 1 minute
        afterOneMinute = currentDate + 1*60;
    }
    addDate();
    console.log(currentDate);
    // verify sessionStorage when page is reloaded    ;
    if(typeof(Storage) !== "undefined") {
        if(sessionStorage.currentDate){
            addDate();
            sessionStorage.currentDate = currentDate;
            if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
            {
                $('#box').hide();
                console.log('hide');
            }
            else{
                sessionStorage.clear();
                console.log('show');
                $('#box').show();
            }

        }
    }
    function hideOneMinute() {
        if(typeof(Storage) !== "undefined") {
            if(sessionStorage.currentDate){
                addDate();
                sessionStorage.currentDate = currentDate;
                if(Number(sessionStorage.currentDate) < Number(sessionStorage.afterOneMinute))
                {
                    $('#box').hide();
                }
                else{
                    sessionStorage.clear();
                    console.log('show');
                    $('#box').show();
                }

            }else{
                addDate();
                sessionStorage.currentDate = currentDate;
                sessionStorage.afterOneMinute = afterOneMinute;
                console.log('hide');
                $('#box').hide();
            }
            document.getElementById("messageBox").innerHTML = "Box will be shown at " + sessionStorage.afterOneMinute;
        } else {
            document.getElementById("messageBox").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>

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

В вашем случае вы тратите впустую пропускную способность, отправляя все данные в каждом HTTP-заголовке. Поэтому я рекомендую вам использовать локальное хранилище HTML вместо файлов cookie.

Согласно техническому различию, а также моему пониманию:

• Помимо того, что это старый способ сохранения данных, файлы cookie предоставляют вам ограничение в 4096 байт - его на печенье. Локальное хранилище размером до 5 МБ на домен
• localStorage - это реализация интерфейса хранилища. Он хранит данные без даты истечения срока действия и очищается только с помощью JavaScript или очистки кэша браузера/Локально сохраненных данных - в отличие от истечения срока действия файлов cookie.

Https://jsfiddle.net/eath6oyy/33/

$(document).ready(function() {
var currentTime = new Date().getTime();
var timeAfter24 = currentTime + 24*60*60*1000;
  $("#close-alert-box-news").click(function() {
    $("#alert-box-news").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime') >= currentTime)
  {
    $('#alert-box-news').hide();
  }else{
    $('#alert-box-news').show();
  }
  
  
  $("#close-alert-box-maintenance").click(function() {
    $("#alert-box-maintenance").hide(800);
    //Set desired time till you want to hide that div
    localStorage.setItem('desiredTime1', timeAfter24); 
  });
  if(localStorage.getItem('desiredTime1') >= currentTime)
  {
    $('#alert-box-maintenance').hide();
  }else{
    $('#alert-box-maintenance').show();
  }
 
});

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Мой ответ является продолжением ответа @Loading. Проблема с отображением содержимого при загрузке страницы, даже если пользователь решил отклонить предупреждения, связана с оценкой локального хранилища, выполняемой после загрузки DOM.

Поэтому я бы рекомендовал скрывать предупреждения по умолчанию, даже если это может быть проблемой для браузеров без включенной JS. Однако это можно обойти, если вы используете modernizr.js , который добавит класс в HTML элемент при обнаружении JS, и вы можете соответствующим образом изменить базовые стили, например:

.alert-box {
  display: none;
}
.no-js .alert-box {
  display: block;
  /* Other styles */
}

Мое решение использует localStorage и использует параметры хранения в виде строкового объекта: два ключа, хранящиеся в каждом ящике, - это hidden (для хранения статуса ящика) и timestamp (для хранения времени, когда ящик закрыт). Они могут быть использованы для оценки того, (1) пользователь решил отклонить предупреждение и (2) действие было выполнено в течение 24 часов.

Некоторые изменения, которые я внес в ваш код:

1. Используйте контекстно-зависимый выбор, чтобы не нужно было объявлять несколько одинаковых обработчиков событий щелчка для всех полей предупреждений. Это делает код более простым и менее избыточным.
2. Используйте https для URL-адреса изображения, чтобы он не путался с HTTPS JSfiddle:)

Рабочий код показан следующим образом, но localStorage здесь не работает из-за ограничений безопасности: для функциональной демонстрации обратитесь к обновленному JSfiddle вместо этого.

$(function() {
  // Check for localStorage
  if (typeof window.localStorage !== typeof undefined) {
    // Loop through all alert boxes
    $('.alert-box').each(function() {
      var $t = $(this),
        key = $t.attr('id');

      // If key exists and it has not expired
      if (window.localStorage.getItem(key)) {
        var json = JSON.parse(window.localStorage.getItem(key));
        if (json.hide && json.timestamp < Date.now() + 1000 * 60 * 60 * 24) {
          $t.hide();
        } else {
          $t.show();
        }
      } else {
        $t.show();
      }
    });
  }

  // Bind click events to alert boxes
  $('.alert-box a.alert-box-close').click(function() {
    var $alertBox = $(this).closest('.alert-box');

    // Hide box
    $alertBox.hide(800);

    // Store option in localStorage, using the box's ID as key
    if (typeof window.localStorage !== typeof undefined) {
      window.localStorage.setItem($alertBox.attr('id'), JSON.stringify({
        hide: true,
        timestamp: Date.now()
      }));
    }
  });

  // For demo purposes only, clear localStorage to ease testing
  $('#clear-localstorage').click(function() {
    window.localStorage.clear();
  });
});

.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<button id="clear-localstorage">Clear local storage (for testing)</button>

Вы можете использовать имеющийся у вас код плюс установить файл cookie, срок действия которого истекает через 24 часа:

1. Установите Структуру файлов cookie MDN JavaScript

2. В вашем js установите переменную tomorrow, содержащую дату истечения срока действия вашего файла cookie:

   var today = new Date();
   var tomorrow = today.setHours(today.getHours() + 24);
   

3. Установите файлы cookie следующим образом:

   docCookies.setItem('hide_news', 'true', tomorrow);
   

4. Условно скрывайте поля в зависимости от значения файла cookie

   if (docCookies.getItem('hide_news') == 'true'){
     $("#alert-box-news").add_class('hidden');
   };
   

5. Определите класс hidden в вашем CSS файл

   .hidden {
     display none;
   }
   

Вы можете увидеть все это в действии в этом разделе кода.

Обновлен скрипт с 24-часовой проверкой

То, как и где вы храните отметку времени, в большей степени зависит от того, какой элемент управления вы хотите иметь на нем.

Поскольку в этом участвует пользователь, я бы пошел по пути на стороне сервера и создал, т.Е. Дополнительное поле в таблице базы данных пользователей, где хранятся эти состояния.

Таким образом, в отличие от пользователя, который может очистить файлы cookie/хранилище, ты контролируйте, какие предупреждения должны оставаться скрытыми и как длинный.

Вторым преимуществом было бы то, что это может быть, в дополнение ко времени, свернуто, когда определенные действия могут быть предприняты на основе пользователей и их учетных данных.

В любом случае я бы построил отображение/скрытие следующим образом, где вы храните класс или атрибут, т.Е. в теге html, который определяет, будет ли поле визуальным или нет.

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

Вот простой пример использования скрипта, простого javascript, и он ни в коем случае не оптимизирован, он просто для логики, которую я хотел показать.

Поскольку на самом деле это не будет выполняться как фрагмент стека из-за некоторых проблем с безопасностью, вот скрипка, которая делает: https://jsfiddle.net/essjuj4y/10/

Нажав кнопку For this demo - to clear local storage, хранилище будет очищено, и когда страница будет запущена снова, поля будут появляются.

/*  add an event handler to be able to close a box  */
var alerts = document.querySelectorAll('.alert-box-close');
for (var i = 0; i < alerts.length; i++) {
  alerts[i].addEventListener('click', function(e) {
    var boxtype = e.target.parentElement.id.split('-').pop();
    document.getElementById('alert-box-' + boxtype).style.display = "none";
    localStorage.setItem("al-" + boxtype, new Date());
  })
}

/*  add an event handler to be able to clear storage - for demo purpose  */
document.querySelector('button').addEventListener('click', function(e) {
  localStorage.clear();
})

.alert-box {
  display: none;
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}

.al-news #alert-box-news,
.al-maintenance #alert-box-maintenance {
  display: block;
}

<html>
  <head>
    <script type='text/javascript'>
      function has24HourPassed(key) {
        var storeval = localStorage.getItem(key);
        if (!storeval) return true;    /*  nothing stored in storage  */
        var T24_HOUR = 24 * 60 * 60 * 1000;
        if ((new Date - new Date(storeval)) < T24_HOUR) return false;        
        localStorage.removeItem(key);  /*  24 hours passed so we can remove stored date  */
        return true;
      }
      (function(d) {
        if (has24HourPassed('al-news')) {
          d.classList.add('al-news');
        }
        if (has24HourPassed('al-maintenance')) {
          d.classList.add('al-maintenance');
        }
      })(document.documentElement);
    </script>
  </head>
  
  <body>
    <article class="alert-box" id="alert-box-news">
      <h1>News Alerts</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-news">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <article class="alert-box" id="alert-box-maintenance">
      <h1>Site Maintenance</h1>
      <p>text text text text text text text text text text text text text text</p>
      <a class="alert-box-close" id="close-alert-box-maintenance">
        <img src="http://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
      </a>
    </article>

    <button>For this demo - to clear local storage</button>

  </body>
</html>

Вам следует просто использовать локальное хранилище.

HTML

<article class="alert-box" id="alert-box-news">
  <h1>News Alerts</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-news">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

<article class="alert-box" id="alert-box-maintenance">
  <h1>Site Maintenance</h1>
  <p>text text text text text text text text text text text text text text</p>
  <a class="alert-box-close" id="close-alert-box-maintenance">
    <img src="https://i.imgur.com/czf8yas.png" height="25" width="25" alt="">
  </a>
</article>

Яваскипт

$(document).ready(function() {
  var nd = new Date();
  var md = nd;
  var newsclicked = false;
  var maintenanceclicked = false;
  setInterval(function() {
    newsclicked = (localStorage.getItem("newsclicked")) ? new Date(localStorage.getItem("newsclicked")) : false;
    maintenanceclicked = (localStorage.getItem("maintenanceclicked")) ? new Date(localStorage.getItem("maintenanceclicked")) : false;
    if (maintenanceclicked === false) {
      console.log(maintenanceclicked);
      $("#alert-box-maintenance").show(800);
    } else {
      var mddiff = (md.getTime() - maintenanceclicked.getTime()) / (60 * 60 * 24 * 1000);
      if (mddiff >= 1) {
        $("#alert-box-maintenance").show(800);
      } else {
        $("#alert-box-maintenance").hide(800);
      }
    }
    if (newsclicked === false) {
      $("#alert-box-news").show(800);
    } else {
      var nddiff = (nd.getTime() - newsclicked.getTime()) / (60 * 60 * 24 * 1000);
      if (nddiff >= 1) {
        $("#alert-box-news").show(800);
      } else {
        $("#alert-box-news").hide(800);
      }
    }
  }, 200);
  $("#close-alert-box-news").on("click", function() {
    nd = new Date();
    localStorage.setItem("newsclicked", nd);
    $("#alert-box-news").hide(800);
  });
  $("#close-alert-box-maintenance").on("click", function() {
    md = new Date();
    localStorage.setItem("maintenanceclicked", md);
    $("#alert-box-maintenance").hide(800);
  });
});

CSS-код

.alert-box {
  width: 50vw;
  position: relative;
  margin: 20px auto;
  border: 1px solid black;
}

.alert-box-close {
  position: absolute;
  top: -12px;
  right: -12px;
  cursor: pointer;
}
#alert-box-news,#alert-box-maintenance{
  display:none; // by default have both elements hidden.
}

Вот обновление в вашей скрипке, чтобы проверить его в действии. Обновите страницу после того, как вы закрыли div

Мой конкретный процесс и процесс lendi Я предлагаю вам поддерживать таблицу серверной базы данных (например, sql, mysql и т. Д.), Для которой можно просто удерживать идентификатор пользователя, отображать окно предупреждения или нет, в этой таблице создаются 2 столбца этого типа.

1) Если ваш пользователь зарегистрирован, пользователь используется для посещения вашего сайта с использованием идентификатора пользователя или сведений, вы можете управлять этим окном оповещения.

2) Если пользователь не зарегистрирован в это время, используйте MAC-идентификатор посетителя.