«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript



Игра «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих



Далее на странице...



Здесь реализуются 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. Метод setTimeout - модальное окно открывается через 7 секунд (строка №39) const setTimerModal = setTimeout(openModal, 7000);.

2. В функцию openModal() помещается метод clearInterval (строка №9), который отменяет выполнение скрипта setTimerModal.

Делается это для следующих случаев: если пользователь открыл модальное окно сам (при помощи одного из триггеров) до промежутка времени, указанного в п.1, то благодаря отмене выполнения скрипта, модальное окно не будет вызвано повторно/автоматически.

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

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

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);

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



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



Отзывы и комментарии:

Комментариев нет...

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


Рунет - Часть 5
Открытие модального окна через промежуток времени и в конце страницы
249
Методы объекта ClassList - Работа с классами - Свойство length
640
Делегирование событий - Отслеживание событий на множестве элементов
2313
Пример создания табов в JavaScript - Работа с проектом
513
Методы setTimeout, setInterval и clearInterval – Синтаксис
396
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
391
Таймер обратного отсчета – Остаток времени до полуночи
818
Cвойства clientWidth и clientHeight - Размеры элементов DOM
387
Вызов и закрытие модального окна - Триггеры и data-атрибуты
2585
Функции-конструкторы - Прототип объекта. Свойство prototype
129
Контекст вызова функции this - Методы call, apply и bind
174
Контекст вызова в обработчиках событий – this в стрелочной функции
169
Объявление и наследование классов - Свойство constructor
70

Тематические публикации
Популярные заметки
Последние заметки