«Единственный способ творить великие дела – это любить то, что ты делаешь»
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
Открытие модального окна через промежуток времени и в конце страницы
91
Методы объекта ClassList - Работа с классами - Свойство length
246
Делегирование событий - Отслеживание событий на множестве элементов
1653
Пример создания табов в JavaScript - Работа с проектом
233
Методы setTimeout, setInterval и clearInterval – Синтаксис
172
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
198
Таймер обратного отсчета – Остаток времени до полуночи
443
Cвойства clientWidth и clientHeight - Размеры элементов DOM
220
Вызов и закрытие модального окна - Триггеры и data-атрибуты
839
Функции-конструкторы - Прототип объекта. Свойство prototype
86
Контекст вызова функции this - Методы call, apply и bind
73
Контекст вызова в обработчиках событий – this в стрелочной функции
68
Объявление и наследование классов - Свойство constructor
11
Помощь сайту
Yandex-деньги/Ю-Money
410011236419322
Перевод на карту СБ
4276 1300 1671 5819
WebMoney
R711879515665 Z861169301432

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