Открытие модального окна через промежуток времени и в конце страницы

Здесь реализуются 2 задачи.

1. Открытие модального окна через заданный промежуток времени.

2. Открытие модального окна после того, как пользователь пролистал страницу до конца.

Открытие модального окна - Промежуток времени

Продолжается работа с кодом из предыдущей статьи.

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
      modalCloseBtn = document.querySelector('[data-close]'),
      modalWindow = document.querySelector('.modal');
   
function openModal() {
  modalWindow.classList.add('show');
  modalWindow.classList.remove('hide');
  document.body.style.overflow = 'hidden';
  clearInterval(setTimerModal); // Остановка скрипта
}

modalTrigger.forEach(item => {
  item.addEventListener('click', openModal); // Функция передается
});

function closeModal(){
  modalWindow.classList.add('hide');
  modalWindow.classList.remove('show');
  document.body.style.overflow = '';
}

modalCloseBtn.addEventListener('click', closeModal); // Функция передается

// При клике ВНЕ окна - закрываем его
modalWindow.addEventListener('click', (e) => {
  if (e.target === modalWindow) {
     closeModal(); // Функция вызывается
  }
});

// Закрытие модального - Клик на ESC
document.addEventListener('keydown', (e) => {
   if (e.code === "Escape" && modalWindow.classList.contains('show')) {
       closeModal(); 
   }
});

// Отктывается модальное окно через 7 секунд
const setTimerModal = setTimeout(openModal, 7000);

Результат в Браузере

Открытие модального окна - В конце страницы

Стоит задача - показать пользователю модальное окно, как только он пролистал страницу до конца. Как это отследить?

1. Чтобы отследить, что пользователь пролистывает страницу, используется событие scroll.

Событие scroll "вешается" на глобальный объект window.

2. Далее используются метрики, частично рассмотренные здесь.

window.pageYOffset - текущая прокрутка сверху.

document.documentElement.clientHeight - высота видимой области окна/видимая часть страницы.

document.documentElement.scrollHeight - полный размер страницы с учётом прокрутки.

Текущая прокрутка страницы сверху + ее видимая часть сравнивается с полным размером страницы. И как только они совпадают - значит, пользователь прокрутил страницу полностью. Тогда и появляется модальное окно.

Важный момент: в некоторых браузерах и/или использование некоторых мониторов может привести к тому, что данный скрипт не сработает. Выход из положения есть: в формулу нужно добавить -1px. Таким образом - до того как до конца страницы останется 1px - будет появляться модальное окно.

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
      modalCloseBtn = document.querySelector('[data-close]'),
      modalWindow = document.querySelector('.modal');
   
function openModal() {
  modalWindow.classList.add('show');
  modalWindow.classList.remove('hide');
  document.body.style.overflow = 'hidden';
  //clearInterval(setTimerModal);
}

modalTrigger.forEach(item => {
  item.addEventListener('click', openModal); // Функция передается
});

function closeModal(){
  modalWindow.classList.add('hide');
  modalWindow.classList.remove('show');
  document.body.style.overflow = '';
}

modalCloseBtn.addEventListener('click', closeModal); // Функция передается

// При клике ВНЕ окна - закрываем его
modalWindow.addEventListener('click', (e) => {
  if (e.target === modalWindow) {
     closeModal(); // Функция вызывается
  }
});

// Закрытие модального - Клик на ESC
document.addEventListener('keydown', (e) => {
   if (e.code === "Escape" && modalWindow.classList.contains('show')) {
       closeModal(); 
   }
});

//const setTimerModal = setTimeout(openModal, 7000);

// Если при скроллинге выполняется условие (конец страницы), то открывается модальное окно
window.addEventListener('scroll', () => {
   if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
       openModal();
   }
});

Результат в Браузере

Модальное окно - Появляется один раз

Чтобы модальное окно не появлялось каждый раз, когда пользователь оказался в конце страницы, можно попробовать для обработчика событий указать следующее: {once: true}.

JavaScript-код

window.addEventListener('scroll', () => {
   if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
       openModal();
   }
}, {once: true});

{once: true} - дополнительный объект со свойством once: если true, то обработчик автоматически удаляется после выполнения. В нашем случае этот способ не сработает, так как обработчик срабатывает сразу - как только пользователь хотя бы немного прокрутил колесо мыши.

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

JavaScript-код

const modalTrigger = document.querySelectorAll('[data-modal]'),
      modalCloseBtn = document.querySelector('[data-close]'),
      modalWindow = document.querySelector('.modal');
   
function openModal() {
  modalWindow.classList.add('show');
  modalWindow.classList.remove('hide');
  document.body.style.overflow = 'hidden';
  //clearInterval(setTimerModal);
}

modalTrigger.forEach(item => {
  item.addEventListener('click', openModal); // Функция передается
});

function closeModal() {
  modalWindow.classList.add('hide');
  modalWindow.classList.remove('show');
  document.body.style.overflow = '';
}

modalCloseBtn.addEventListener('click', closeModal); // Функция передается

// При клике ВНЕ окна - закрываем его
modalWindow.addEventListener('click', (e) => {
  if (e.target === modalWindow) {
     closeModal(); // Функция вызывается
  }
});

// Закрытие модального - Клик на ESC
document.addEventListener('keydown', (e) => {
   if (e.code === "Escape" && modalWindow.classList.contains('show')) {
       closeModal(); 
   }
});

//const setTimerModal = setTimeout(openModal, 7000);

function showModalByScroll() {
  if (window.pageYOffset + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
     openModal();
     // Обработчик удаляется => окно открывается один раз
     window.removeEventListener('scroll', showModalByScroll);  
   }
}

// Открытие модального окна в конце страницы   
window.addEventListener('scroll', showModalByScroll);

Результат в Браузере



Читайте также...

Метод alert - Модальное окно

Метод prompt - Окно для ввода информации

Метод open объекта Window - Дочернее окно

Метод confirm – Окно с кнопками ОК и Отмена