Устраните всплывающие окна рассылок и регистрации до их появления
Вы прочли три абзаца статьи, и тут поверх экрана выезжает окошко, выпрашивающее ваш email. Всплывающие окна рассылок — самое предсказуемое прерывание в вебе и самое простое для устранения навсегда.
Как работают всплывающие окна регистрации
Большинство всплывающих окон срабатывают одним из трёх способов: после задержки, после прокрутки на определённое расстояние или по «exit intent», когда курсор устремляется к панели вкладок. Каким бы ни был триггер, результат — один и тот же элемент DOM: модальный контейнер плюс тёмная подложка. Скройте оба — и прерывание исчезнет.
Рецепт 1: скрыть распространённые модальные контейнеры
Виджеты всплывающих окон переиспользуют небольшой набор имён классов. Это правило за один проход покрывает крупные из них и подложку.
/* Очистка модальных окон рассылок / регистрации */
[class*="newsletter"], [class*="signup-modal"],
[class*="email-capture"], [class*="subscribe-popup"],
[id*="popup"], [class*="popup-overlay"],
.modal[role="dialog"] {
display: none !important;
visibility: hidden !important;
}
/* Снова включить страницу за модальным окном */
body {
overflow: auto !important;
padding-right: 0 !important;
}Тот padding-right: 0 важен: многие скрипты модальных окон добавляют правый отступ к body, компенсируя скрытую полосу прокрутки, и после исчезновения модалки остаётся уродливый зазор.
Рецепт 2: победить оверлеи exit-intent
Всплывающие окна exit-intent отслеживают уход мыши за пределы окна. Они почти всегда живут в фиксированном полноэкранном контейнере с очень высоким z-index. Нацеливаться можно по этой сигнатуре.
/* Всё фиксированное и полноэкранное поверх страницы */
div[style*="position: fixed"][style*="z-index"] {
display: none !important;
}
/* Распространённые имена классов exit-intent */
[class*="exit-intent"], [class*="exit-popup"],
[data-popup-trigger="exit"] {
display: none !important;
}Используйте первый селектор осторожно — некоторые сайты помещают полезный интерфейс в фиксированные контейнеры. Если страница сломалась, сузьте правило только до этого домена.
Рецепт 3: JS-правило, блокирующее всплывающие окна у источника
CSS скрывает всплывающие окна после их отрисовки. JavaScript может вообще не дать им отрисоваться, обезвредив таймеры и слушатели прокрутки, которые их запускают.
// Отключить таймерные окна, блокируя долгие таймауты
const realTimeout = window.setTimeout;
window.setTimeout = function (fn, delay, ...rest) {
if (delay > 1500) return 0; // пропускать подозрительно долгие задержки
return realTimeout(fn, delay, ...rest);
};
// Удалять модалки, которые всё же проскользнули
new MutationObserver(() => {
document.querySelectorAll('[class*="modal"], [class*="popup"]')
.forEach(el => {
if (el.offsetHeight > 100 && el.offsetHeight < 700) {
el.remove();
}
});
}).observe(document.documentElement, { childList: true, subtree: true });Блокировка таймаутов дольше 1,5 секунд убивает большинство отложенных всплывающих окон, не трогая обычные анимации страницы. Подстройте порог, если сайт полагается на медленные таймеры.
Рецепт 4: не дать странице блокироваться
Даже когда всплывающее окно скрыто, некоторые скрипты замораживают прокрутку, добавляя класс к элементу <html>. Снимите его и восстановите движение.
// Принудительно разблокировать прокрутку
const html = document.documentElement;
['no-scroll', 'modal-open', 'overflow-hidden', 'fixed'].forEach(c => {
html.classList.remove(c);
document.body.classList.remove(c);
});
document.body.style.overflow = 'auto';Настройте один раз, просматривайте везде
Применяйте CSS-рецепты с широким шаблоном URL вроде *://*/* и держите JS-правило для тех немногих сайтов, которым нужна дополнительная сила. Поскольку JustZix запускает ваши правила до того, как страница закончит отрисовку, хорошо сделанные всплывающие окна даже не мелькнут на экране.
- Начните с Рецепта 1 глобально.
- Добавляйте Рецепт 3 только на упрямых сайтах.
- Внесите в белый список любой сайт, где «модалка» — это что-то действительно нужное вам.
Следующие шаги
Установите со страницы скачать JustZix и изучите каталог готовых примеров за другими сниппетами. Cookie-баннеры — близкий родственник всплывающих окон; уберите и их с нашим руководством на /ru/blog/hide-cookie-walls-and-consent-popups. С сохранёнными обоими правилами веб читается так, как должен: только контент.
Оцени эту статью
Оценок пока нет — оцени первым.