Как заставить всплывающее окно появляться через 3 секунды, но один раз для каждого пользователя, используя css и jquery?

#html #jquery #css

#HTML #jquery ( jquery ) #css — код

Вопрос:

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

Мой HTML-код

 <div id="popUpMain" style="display: none;">
    <div id="popup">
      <h1 id="newsHeading">Join</h1>
      <a href="#linkHere" target="_blank"><button class="buttonNews">More Info</button></a>
      <button class="buttonNews">No Thanks</button>
    </div>
  </div>

Скрипт, обрабатывающий jQuery

 <script>
  $(document).ready(function(){
      setTimeout(function(){
      $('#popUpMain').css('display', 'block'); }, 3000);
  });

  $('.buttonNews').click(function(){
    $('#popUpMain').css('display', 'none')
  });
</script>

Заранее благодарю.

1. Что подразумевается под «только css»? Потому что я думаю, что эта фраза означает что-то другое для большинства людей.

2. @HereticMonkey Извините, формулировка: использование css, только один раз для каждого пользователя.

Ответ №1:

Чтобы добиться этого, вам нужно отслеживать, показывалось ли пользователю всплывающее окно раньше или нет. Самый простой способ сделать это — использовать localStorage для управления логическим флагом что-то вроде этого:

 $(document).ready(function() {
  if (!localStorage.getItem('popupPreviouslyShown') || false) {
    setTimeout(function() {
      $('#popUpMain').css('display', 'block');
      localStorage.setItem('popupPreviouslyShown', true);
    }, 3000);
  }
});

Рабочий пример