«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей


Игра «Морской Бой» на 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);

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

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

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

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

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

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

Ваше Имя:

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

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

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


Рунет - Часть 5
Открытие модального окна через промежуток времени и в конце страницы
558
Методы объекта ClassList - Работа с классами - Свойство length
922
Делегирование событий - Отслеживание событий на множестве элементов
2975
Пример создания табов в JavaScript - Работа с проектом
1000
Методы setTimeout, setInterval и clearInterval – Синтаксис
749
Работа с датами - Методы объекта Date. 1970 год. Число миллисекунд
612
Таймер обратного отсчета – Остаток времени до полуночи
1332
Cвойства clientWidth и clientHeight - Размеры элементов DOM
600
Вызов и закрытие модального окна - Триггеры и data-атрибуты
4516
Функции-конструкторы - Прототип объекта. Свойство prototype
252
Контекст вызова функции this - Методы call, apply и bind
306
Контекст вызова в обработчиках событий – this в стрелочной функции
313
Объявление и наследование классов - Свойство constructor
177
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта
Популярные заметки
Последние заметки