BITSPARK / Статьи / Дизайн и элементы сайта

Всплывающее окно на сайте: как называется и что проверить

Коротко: всплывающее окно на сайте MDN называет overlays, popups, popovers и dialogs. Страница Google делит такие окна на межстраничные объявления, которые занимают всю страницу, и диалоговые окна, которые занимают её часть. Окно бывает модальным и немодальным, и у каждого вида свои правила закрытия и работы с клавиатуры. Google пишет, что навязчивые окна мешают поисковым системам обрабатывать контент и это может сказаться на позиции в результатах поиска. На странице справки Яндекс Вебмастера о качестве сайта есть строка о сайтах с агрессивным привлечением внимания.

Ниже: как называется всплывающее окно на сайте, чем окно внутри страницы отличается от нового окна браузера, что о навязчивых окнах написано у Google и Яндекса, как окно должно закрываться и что проверить при приёмке сайта.

Страницы источников открыты 05.10.2026. Часть источников - английские страницы MDN: цитаты даны в оригинале, перевод наш. Примеры вымышленные: интернет-магазин чая с сайтом example.ru.

Как называется всплывающее окно на сайте?

Коротко: у такого окна нет одного названия. MDN перечисляет overlays, popups, popovers и dialogs, а Google называет оверлеями и межстраничные объявления, и диалоговые окна. Поп-ап - русская запись слова popup. Окно при выходе с сайта и окно чата описаны по сценарию показа, отдельных названий в этих источниках у них нет.

MDN в статье о Popover API описывает такое содержимое как показанное поверх остального содержимого страницы и привлекающее внимание к важной информации или действиям. Там же перечислены названия:

«This content can take several different names - overlays, popups, popovers, dialogs, etc.» Перевод наш: у такого содержимого может быть несколько названий - оверлеи, всплывающие окна, поповеры, диалоги и другие.

Страница Google Поиска вводит два слова и объясняет, чем они различаются:

«Межстраничные объявления и диалоговые окна - это оверлеи. Первые занимают всю страницу, а вторые - лишь ее часть (...).»

Слова из двух источников собраны в таблице. Каждая строка пересказывает одну страницу.

СловоСтраницаЧто этим словом названо
оверлеи (overlays)Google, промежуточные страницы и диалоговые окнамежстраничные объявления и диалоговые окна вместе
межстраничные объявленияGoogle, та же страницаоверлеи, которые занимают всю страницу
диалоговые окнаGoogle, та же страницаоверлеи, которые занимают часть страницы
overlays, popups, popovers, dialogsMDN, Popover APIназвания содержимого, показанного поверх остального содержимого страницы
dialogMDN, страница об элементе <dialog>диалоговое окно или другой интерактивный элемент, такой как инспектор или окно

Поп-ап - русская запись слова popup из списка MDN. Окно при выходе с сайта и окно чата описаны по сценарию показа, а в источниках этой статьи у таких окон отдельных названий нет. Название по Google зависит от того, занимает окно всю страницу или её часть. MDN перечисляет несколько названий для содержимого поверх страницы, а блокирует ли окно остальную страницу, описано отдельно, в следующем разделе.

Чем модальное окно отличается от немодального?

Коротко: по MDN в модальном окне остальная страница не реагирует на действия, пока с окном что-то не сделают. В немодальном окне с остальной страницей можно работать. Окна Popover API MDN называет всегда немодальными, а модальное окно создаётся элементом <dialog>. Для модального окна браузер показывает подложку за окном.

MDN делит такие окна на два вида:

«modal, meaning that while a popover is being shown, the rest of the page is rendered non-interactive until the popover is actioned in some way (for example an important choice is made).» Перевод наш: модальное - пока окно показано, остальная страница не реагирует на действия, пока с окном что-то не сделают (например, не сделают важный выбор).

«non-modal, meaning that the rest of the page can be interacted with while the popover is being shown.» Перевод наш: немодальное - пока окно показано, с остальной страницей можно работать.

Для заказчика различие видно на экране. Если за окном нельзя нажать ни одну кнопку страницы, окно модальное. Если можно, оно немодальное.

Страница MDN об элементе <dialog> пишет, что для модального окна браузер показывает подложку за окном, а её оформление можно менять: например, размывать или затемнять содержимое позади окна. Затемнение страницы за окном - вопрос дизайна. Его решают вместе с остальным видом окна.

Русская страница MDN определяет элемент так:

«HTML-элемент <dialog> определяет диалоговое окно или другой интерактивный элемент, такой как инспектор или окно.»

Всплывающее окно на странице и новое окно браузера - это одно и то же?

Коротко: нет. У слова есть второе значение: новое окно браузера. Chrome по умолчанию блокирует всплывающие окна, а MDN пишет, что такие окна должны открываться в прямой ответ на действие пользователя. Вопросы, как разрешить или заблокировать всплывающие окна, относятся к настройке браузера у посетителя.

Окна из двух предыдущих разделов MDN описывает как содержимое страницы: элемент <dialog> и Popover API - части самой страницы. Второе значение слова описано на другой странице MDN, о методе window.open():

«By default, window.open opens the page in a new tab. If popup is set to true, it requests that a minimal popup window be used.» Перевод наш: по умолчанию window.open открывает страницу в новой вкладке. Если popup установлен в true, запрашивается минимальное всплывающее окно.

Правила блокировки на той же странице:

«Popup windows must be opened in direct response to user input, and a separate user gesture event is required for each Window.open() call.» Перевод наш: всплывающие окна должны открываться в прямой ответ на действие пользователя, и для каждого вызова Window.open() нужен отдельный пользовательский жест.

Справка Chrome описывает блокировку на стороне посетителя:

«По умолчанию браузер Chrome блокирует всплывающие окна (...). Этот параметр можно изменить.»

В той же справке есть раздел для владельцев сайтов:

«В браузере Chrome блокируются всплывающие окна, содержимое которых бесполезно для пользователей.»

Шаги, как разрешить или заблокировать окна в Chrome, перечислены на странице справки. В статье они не пересказываются. Для заказчика из раздела следует один вопрос подрядчику: окно открывается внутри страницы или это новое окно браузера.

Какие окна Google называет навязчивыми?

Коротко: Google пишет, что навязчивые диалоговые окна и межстраничные объявления мешают поисковым системам обрабатывать контент, и это «может сказаться» на позиции ресурсов в результатах поиска. Страница советует баннеры, которые не занимают много места на экране, и не размещать межстраничные объявления поверх контента всей страницы. Страница написана про Google Поиск.

Страница «Промежуточные страницы и диалоговые окна» озаглавлена «Не используйте навязчивые межстраничные объявления и диалоговые окна». О влиянии на результаты поиска в её вводной части сказано так:

«Навязчивые диалоговые окна и межстраничные объявления мешают Google и другим поисковым системам обрабатывать ваш контент. Это может сказаться на позиции ваших ресурсов в результатах поиска.»

Величину влияния страница не называет, о трафике и числе заявок не говорит. Что произойдёт с конкретным сайтом, из неё не следует. Правила страницы относятся к Google Поиску и на Яндекс не переносятся.

Какие окна Google считает ненавязчивыми и что советует:

«Ненавязчивыми можно назвать диалоговые окна, которые не мешают пользователям знакомиться с контентом.»

«Чтобы привлечь внимание аудитории, вместо полноэкранных межстраничных объявлений лучше использовать баннеры, которые не занимают много места на экране.»

  • Google Поиск, та же страница, раздел «Показывайте баннеры, а не межстраничные объявления»

В разделе «Распространенные ошибки» названы две ошибки. Первая: «Не размещайте межстраничные объявления поверх контента всей страницы.» Вторая: если нужно попросить пользователей предоставить согласие или указать информацию, не перенаправлять их на отдельную страницу. Список открывается оговоркой Google:

«(...) (кроме случаев, когда описанные ниже действия выполняются в соответствии с требованиями законодательства)»

  • Google Поиск, та же страница, раздел «Распространенные ошибки»

Какие требования законодательства имеются в виду, страница не называет. Юридической оценки в статье нет. В разделе «Если показывать межстраничные объявления необходимо» Google приводит собственный пример:

«Например, сайт казино должен выводить запрос возраста - специальное межстраничное объявление, в котором нужно указать, сколько вам лет.»

  • Google Поиск, та же страница, раздел «Если показывать межстраничные объявления необходимо»

Это слова Google о сайте казино. Российской нормой пример не назван.

Вопрос о таких окнах есть и на другой странице Google, об удобстве страницы. В разделе «Как самостоятельно оценить удобство страницы» среди вопросов для самопроверки стоит:

«Нет ли на страницах навязчивых межстраничных объявлений?»

Что о всплывающих окнах написано в справке Яндекса?

Коротко: на странице справки Яндекс Вебмастера «Отличия качественного сайта от некачественного» слово popup стоит в одной строке, о сайтах, основное предназначение которых - агрессивное привлечение внимания пользователей. Строка стоит в списке примеров сайтов и описывает сайты с определённым основным предназначением. Другие страницы справки Яндекса в статье не разбираются.

Строка стоит на странице «Отличия качественного сайта от некачественного» в разделе «Примеры несоответствия признакам качественного сайта», в группе «Отображение контента, навязчивое привлечение внимания пользователей»:

«Сайты, основное предназначение которых - агрессивное привлечение внимания пользователей к товарам, работам или услугам (в том числе popup, popunder, clickunder).»

Строка говорит о сайтах, у которых агрессивное привлечение внимания - основное предназначение. Окно с формой заявки на обычной странице в ней не упомянуто. Тексты Google и Яндекса написаны на разных страницах разными словами, и друг на друга они не переносятся.

Как окно должно закрываться и работать с клавиатуры?

Коротко: MDN пишет, что для каждого элемента <dialog> важно предусмотреть способ закрытия, который работает и на устройствах без физической клавиатуры. Для модальных окон пользователи клавиатуры ожидают закрытия клавишей Esc. По MDN при открытии окна фокус клавиатуры должен переходить внутрь окна, а после закрытия возвращаться назад. В описании атрибута closedby страница MDN различает три способа закрытия, они в таблице ниже.

Страница MDN об элементе <dialog> говорит о закрытии прямо:

«It is important to provide a closing mechanism for every <dialog> element, and to ensure that this works on devices that might not have a physical keyboard.» Перевод наш: для каждого элемента <dialog> важно предусмотреть способ закрытия и убедиться, что он работает на устройствах, у которых может не быть физической клавиатуры.

Та же страница в описании атрибута closedby называет три способа закрыть окно:

СпособКак описан на странице MDN
Щелчок или касание вне окнаокно закрывается, когда пользователь щёлкает или касается вне него; MDN называет это действие «light dismiss»
Действие платформынапример, клавиша Esc на компьютере или жест назад или жест закрытия на мобильных платформах
Механизм разработчиканапример, кнопка, которая закрывает окно, или отправка формы

Страница описывает три значения closedby: окно можно закрывать всеми тремя способами, только действием платформы и механизмом разработчика либо только механизмом разработчика. Поддержку closedby и Popover API браузерами MDN показывает в таблице Browser compatibility внизу страниц. Сверять её стоит перед решением, а проверку в нескольких браузерах разбирает статья Кроссбраузерность сайта: что это и как проверить до приёмки.

О клавише Esc на той же странице сказано:

«Keyboard users expect the Esc key to close modal dialogs; ensure that this behavior is implemented and maintained.» Перевод наш: пользователи клавиатуры ожидают, что клавиша Esc закрывает модальные окна; нужно, чтобы это поведение было реализовано и сохранялось.

Фокус клавиатуры - это место на странице, на которое сейчас действуют нажатия клавиш. Страница MDN о роли dialog в разделе Focus management описывает такие ожидания. В окне должен быть хотя бы один элемент, на который можно перевести фокус, например кнопка закрытия.

При появлении окна фокус переходит на элемент по умолчанию внутри окна: для окна с формой это может быть первое поле. Для большинства окон ожидаемое поведение - переход клавишей Tab по кругу внутри окна. О возврате фокуса страница пишет так:

«After the dialog is dismissed, keyboard focus should be moved back to where it was before it moved into the dialog.» Перевод наш: после закрытия окна фокус клавиатуры должен вернуться туда, где он был до перехода в окно.

Что решить до дизайна и что спросить у подрядчика?

Коротко: шесть вопросов ниже опираются на разделы статьи; ответы записываются в задание дизайнеру.

На главной странице BITSPARK шаг процесса «Структура» описан так: «Собираем архитектуру: сценарии, страницы, контент и логику взаимодействия.» Шаг «Дизайн»: «Формируем характер проекта: типографику, композицию, движение и систему интерфейса.» Окно поверх страницы - элемент интерфейса со своим сценарием показа и закрытия.

  1. Окно занимает всю страницу или её часть? Опора: Google называет первые межстраничными объявлениями, вторые диалоговыми окнами и советует баннеры, которые не занимают много места на экране.
  2. Окно модальное или немодальное? Опора: MDN - в модальном остальная страница не реагирует на действия, в немодальном с ней можно работать.
  3. Чем окно закрывается? Опора: три способа закрытия из описания атрибута closedby на странице MDN об элементе <dialog> и совет MDN, чтобы способ закрытия работал на устройствах без физической клавиатуры.
  4. Куда уходит фокус клавиатуры при открытии и закрытии окна? Опора: раздел Focus management на странице MDN о роли dialog.
  5. Есть ли в окне форма и какие данные посетителя в ней собираются? Опора: Google пишет, что за согласием или информацией не нужно перенаправлять пользователя на отдельную страницу. О согласии на обработку персональных данных рассказывает статья Согласие на обработку персональных данных на сайте: ст.9 152-ФЗ: среди вопросов к разработке там первый - выписать все формы, где посетитель вводит данные.
  6. Окно открывается внутри страницы или как новое окно браузера? Опора: раздел о втором значении слова, MDN о window.open() и справка Chrome.

Для example.ru, интернет-магазина чая, запись в задании по окну обратного звонка могла бы выглядеть так. Окно занимает часть страницы и модальное, закрывается кнопкой, касанием вне окна и клавишей Esc. При открытии фокус переходит на первое поле формы, при закрытии возвращается туда, где был до открытия окна. Решение о данных в форме и согласии записано отдельно, а каждая часть записи опирается на источник из разделов статьи.

Что проверить при приёмке на телефоне и на компьютере?

Коротко: пять проверок, каждая опирается на источник из этой статьи: закрытие всеми способами, закрытие без физической клавиатуры, клавиша Tab и возврат фокуса, размер окна и поведение в браузере с настройками по умолчанию.

Список - для разговора с подрядчиком, настройка окон в него не входит.

  1. На компьютере закройте окно всеми способами из задания: кнопкой, касанием или щелчком вне окна, клавишей Esc. Для модального окна MDN называет Esc ожидаемым действием пользователей клавиатуры.
  2. На телефоне закройте окно без физической клавиатуры. MDN просит убедиться, что способ закрытия работает на таких устройствах. Как проверять страницы на экране телефона, описано в статье Адаптивный сайт: что это и как проверить адаптив до приёмки.
  3. На компьютере пройдите окно клавишей Tab. Фокус должен перейти внутрь окна, идти по кругу внутри него и после закрытия вернуться туда, где был раньше (MDN, роль dialog).
  4. Посмотрите, сколько места занимает окно. Google называет ненавязчивыми окна, которые не мешают знакомиться с контентом, и советует не размещать межстраничные объявления поверх контента всей страницы.
  5. Откройте страницу в браузере с настройками по умолчанию. Справка Chrome пишет, что браузер по умолчанию блокирует всплывающие окна, а MDN описывает блокировку нового окна браузера. Как выбрать браузеры для проверки и как их проверять, описано в статье Кроссбраузерность сайта: что это и как проверить до приёмки.

На главной странице BITSPARK шаг «Запуск» описан так: «Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.» Услуги студии, цены и шаги работы от задачи до запуска описаны там же.

Источники

Страницы открыты 05.10.2026.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Дизайн и элементы сайта» →