Как сделать окно на сайте в 2026: модальное, попап и согласие

Окно на сайте это блок, который появляется поверх страницы: форма заявки по клику на кнопку, попап с подарком, запрос согласия на обработку данных, увеличенная картинка из галереи. Сделать его можно тремя способами: попросить готовый код у ИИ, собрать в конструкторе без кода или поставить виджет сервиса. Ниже разберём, какие окна бывают, покажем рабочий пример кода, промпты и правила, из-за которых окно либо приносит заявки, либо выгоняет человека со страницы.

Какие окна бывают на сайте

Словом «окно» называют минимум пять разных вещей, и делаются они по-разному. Сначала определитесь, что именно вам нужно: от этого зависит и промпт для ИИ, и код.

• Модальное окно с формой. Открывается по клику на кнопку, затемняет страницу и ждёт действия: заявка, запись, обратный звонок. Куда потом уходят эти данные, разбирали в материале про сайт с формой заявки.
• Попап с подарком или скидкой. Появляется сам: по таймеру, после доли прокрутки или при попытке увести курсор к закрытию вкладки. Самый спорный тип, потому что человек его не звал.
• Окно согласия на cookie. Юридическое, не маркетинговое: полоса внизу или карточка с двумя кнопками и ссылкой на политику.
• Лайтбокс с картинкой. Клик по превью открывает фото во весь экран, со стрелками между снимками. Нужен галереям, портфолио, каталогам.
• Боковая панель. Выезжает сбоку и не перекрывает страницу целиком: меню на телефоне, корзина, фильтры. Технически то же модальное окно, только с другой анимацией.

Как попросить окно у нейросети: три промпта

Окно это как раз та задача, которую ИИ делает почти без ошибок: код короткий, поведение стандартное. Промпт можно отдать в чат Claude или ChatGPT и скопировать результат в свою страницу. Если сайт уже лежит папкой на компьютере, удобнее рабочее приложение: десктопное Claude Code или приложение ChatGPT с агентом Codex. Они сами найдут нужный файл и впишут окно в вашу вёрстку.

• Окно с формой: «Сделай модальное окно на чистом HTML, CSS и JS без библиотек. Открывается по кнопке «Оставить заявку», внутри поля «Имя» и «Телефон». Закрывается крестиком, клавишей Escape и кликом по затемнённому фону. Используй элемент dialog и метод showModal. Дай файл целиком с комментариями, где что менять».
• Попап с подарком: «Добавь всплывающее окно с предложением скачать чек-лист. Показывать один раз через 20 секунд или после 50% прокрутки, что наступит раньше. Если человек закрыл окно, не показывать ему 14 дней, факт показа храни в localStorage. На экране 480 пикселей окно занимает не больше 90% ширины».
• Согласие на cookie: «Сделай полосу внизу страницы с текстом про использование cookie, ссылкой на политику конфиденциальности и кнопками «Принять» и «Только необходимые». Выбор запоминать, при повторном заходе полосу не показывать».

Главное в промпте: описать не внешний вид, а поведение. Когда появляется, чем закрывается, сколько раз показывается, что происходит на телефоне. Дизайн вы потом поправите одной фразой, а вот забытое закрытие по Escape заметит только пользователь.

По теме: Как сделать прокрутку сайта в 2026: якоря, кнопка наверх, анимации

Рабочий пример: модальное окно на HTML, CSS и JS

Раньше такие окна собирали из обычного блока с position: fixed и вручную писали затемнение, блокировку прокрутки и перехват клавиш. Сейчас в браузере есть готовый элемент <dialog>: он рисует затемнение сам, блокирует страницу под собой и закрывается по Escape без единой строчки кода. Элемент входит в базовый набор возможностей браузеров с марта 2022 года, поддержку по версиям видно на caniuse.

<button id="openBtn">Оставить заявку</button>

<dialog id="modal">
  <div class="box">
    <button id="closeBtn" class="close" aria-label="Закрыть окно">×</button>
    <h3>Оставьте заявку</h3>
    <form method="dialog">
      <input type="text" name="name" placeholder="Имя" required>
      <input type="tel" name="phone" placeholder="Телефон" required>
      <button>Отправить</button>
    </form>
  </div>
</dialog>

<style>
  dialog { border: 0; border-radius: 16px; padding: 0; max-width: 360px; width: calc(100% - 32px); }
  dialog::backdrop { background: rgba(0, 0, 0, .5); }
  .box { padding: 24px; position: relative; }
  .close { position: absolute; top: 8px; right: 8px; border: 0; background: none; font-size: 28px; line-height: 1; cursor: pointer; }
</style>

<script>
  const modal = document.getElementById('modal');
  document.getElementById('openBtn').onclick = () => modal.showModal();
  document.getElementById('closeBtn').onclick = () => modal.close();
  // клик по затемнённому фону тоже закрывает окно
  modal.addEventListener('click', (e) => {
    if (e.target === modal) modal.close();
  });
</script>

Что важно, если будете править руками. Метод showModal() открывает окно поверх всего и включает затемнение ::backdrop, close() его убирает, клавиша Escape работает сразу. А вот закрытие по клику вне окна браузер сам не делает, поэтому мы сравниваем цель клика с самим окном. Внутренние отступы вынесены в блок .box, у самого <dialog> стоит padding: 0: иначе клик по пустой рамке засчитается как клик по фону и окно закроется в неподходящий момент.

В новых версиях Chrome и Firefox то же самое умеет атрибут closedby="any", но в Safari его пока нет, так что четыре строчки на JS остаются надёжнее. Если окно должно всплывать само и только один раз, добавьте проверку памяти браузера.

if (!localStorage.getItem('promoShown')) {
  setTimeout(() => {
    modal.showModal();
    localStorage.setItem('promoShown', Date.now());
  }, 20000);
}

Записывается дата показа, поэтому потом легко разрешить повтор через две недели.

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

То же самое без кода: конструкторы и виджеты

Если сайт собран в конструкторе, писать ничего не нужно. Логика почти везде одинаковая: вы делаете обычный блок, помечаете его как всплывающий и вешаете вызов на кнопку или на условие показа.

• Блочные конструкторы. Окно собирается из готового блока, а кнопка получает ссылку-вызов вместо обычного адреса. Про сам конструктор и тарифы писали в разборе Тильды.
• WordPress. Отдельные плагины попапов: условия показа, частота и внешний вид настраиваются мышкой.
• Сервисы-виджеты. Вставляете один скрипт, окна собираете в кабинете сервиса. Плюс: статистика показов и закрытий. Минус: чужой скрипт замедляет загрузку, а окно исчезнет, когда закончится подписка.

Разница простая. В конструкторе быстрее и безопаснее, но окно живёт по правилам платформы. Своё окно на <dialog> весит несколько килобайт, работает без подписок и правится любой нейросетью за минуту.

По теме: Лендинг с помощью нейросети в 2026: структура, промпты, публикация

Правила, по которым окно не раздражает

Хорошее окно отличается от плохого не дизайном, а поведением. Эти шесть пунктов стоит проверить у любого окна, независимо от способа сборки.

1. Крестик виден сразу. Иконка закрытия контрастная и не меньше 44 пикселей в кликабельной зоне. Серый крестик 10 пикселей на светлом фоне это не закрытие, а ловушка.
2. Три способа закрыть. Крестик, клавиша Escape и клик по затемнённому фону. Если человек не может выйти из окна привычным движением, он выходит с сайта.
3. Никакого показа в первую секунду. Сразу после загрузки окно закроют не глядя. Разумный порог: 15-30 секунд, половина прокрутки или уход курсора к краю экрана.
4. Один показ на человека. Факт показа пишется в localStorage, повтор не раньше чем через одну-две недели. Окно, которое встречает на каждой странице, работает против вас.
5. Отдельная проверка на телефоне. Окно не должно занимать весь экран без прокрутки внутри себя, кнопка закрытия должна попадать под большой палец. Правила адаптивности собрали в статье про мобильную версию сайта.
6. Страница под окном не двигается. Сам по себе showModal() прокрутку фона не блокирует, поэтому добавьте правило html:has(dialog[open]) { overflow: hidden; } или снимайте прокрутку скриптом при открытии окна.

Чем чаще всего портят окна

Ошибки повторяются от сайта к сайту и видны за две минуты проверки.

• Окно перекрывает контент на телефоне. На мониторе карточка аккуратная, а на экране 360 пикселей выходит за края вместе с кнопкой закрытия, и человек застревает.
• Ломается прокрутка. Самодельное окно прокручивает страницу за собой, из-за чего пользователь листает фон вместо содержимого окна, а после закрытия оказывается неизвестно где.
• Два окна одновременно. Согласие на cookie снизу плюс попап со скидкой по центру дают ощущение неисправного сайта.
• Окно вместо страницы. Если оно закрывает текст сразу после перехода из поиска, это вредит и людям, и позициям: Google советует избегать навязчивых окон, перекрывающих контент. Исключение делают для юридических уведомлений и окон входа в закрытые разделы.
• Форма без обратной связи. Человек нажал «Отправить», окно закрылось, и непонятно, ушла заявка или нет. Внутри окна должно появляться подтверждение.

Частые вопросы

Обязательно ли окно с согласием на cookie?

Если сайт собирает аналитику или данные посетителей, согласие нужно: cookie, по которым можно узнать человека, в России считаются персональными данными и попадают под 152-ФЗ, а с 30 мая 2025 года штрафы за обработку без согласия выросли. Технические cookie, без которых сайт не работает, под согласие не подпадают. Что ещё требует закон при сборе данных, разбирали в статье про регистрацию на сайте.

Можно ли сделать окно без JavaScript?

Частично. Для подсказок и небольших карточек есть атрибут popover: кнопка открывает блок сама, без скриптов, и этот механизм доступен во всех основных браузерах с января 2025 года. Но полноценное модальное окно, которое блокирует остальную страницу и держит фокус внутри, требует вызова showModal(), то есть пары строк JS.

Почему окно не открывается?

Три причины покрывают почти все случаи: id в разметке не совпадает с id в скрипте, скрипт стоит выше окна в файле и не находит элемент, либо в localStorage уже записан факт показа. Последнее лечится очисткой данных сайта в настройках браузера или проверкой в приватном окне.

Как часто показывать попап с предложением?

Один раз за визит и не чаще раза в одну-две недели для одного человека. Если попап открывается на каждой странице, показы растут, а заявки падают: его закрывают не читая.

Открывается ли такое окно в старых браузерах?

Элемент <dialog> поддерживают все актуальные версии Chrome, Safari, Firefox и Edge уже несколько лет. На совсем старых окно отобразится как обычный блок в потоке страницы, поэтому важную кнопку («Заказать», «Позвонить») дублируйте на самой странице, а не прячьте только внутри окна.