Как закрепить всплывающее окно

Обновлено: 27.04.2024

Всплывающее окно, или pop-up (попап), — это элемент интерфейса, который внезапно всплывает на экране пользователя или появляется при клике на определённую часть сайта. Раньше этот элемент использовали только как рекламный виджет, который часто раздражал пользователя, но сейчас его стали применять с пользой. В форме pop-up делают:

В REG.Site установлен плагин Divi Supreme Pro. Он позволяет быстро создавать всплывающие окна (pop-up) на сайте.

Как сделать всплывающее окно в REG.Site

Так как плагин Divi Supreme Pro установлен в REG.Site по умолчанию, можно сразу приступать к оформлению внешнего вида всплывающего окна. Настройка всплывающего окна состоит из двух этапов:

Создание макета.
Размещение макета на сайте.

Для примера мы сделаем всплывающее окно с акцией. Однако Divi Supreme Pro позволяет добавить и форму обратной связи, и галереи картинок, и много другое. Всё зависит от конкретной задачи.

Этап 1. Создайте макет

Нажмите на кнопку Добавить новый:

Выберите Начать создание:

Теперь вы можете переходить к созданию макета всплывающего окна. Чтобы создать макет, вам нужно настроить разделы, строки и модули. Как это сделать, описано в статье Основные элементы редактирования и в обзорном видео:

Например, наше всплывающее окно выглядит вот так:

Этап 2. Разместите макет на сайте

После того как макет всплывающего окна создан, можно разместить его на сайте. Для этого нужно отредактировать общий вид сайта и привязать pop-up к определённому элементу.

Обратите внимание! Даже если вы хотите, чтобы всплывающее окно появлялось перед входом или выходом пользователя с сайта, макет необходимо привязать к определенному элементу на странице сайта. Инструкция как настроить именно такой вариант окна описана ниже.

В качестве примера мы покажем, как привязать всплывающее окно к кнопке. Для этого перейдите в Настройки модуля:

Затем перейдите во вкладку Дополнительно ― Видимость:

Найдите строку «Использовать всплывающее окно» и переведите переключатель в положение ДА:

Перед вами появятся настройки pop-up. В строке «Всплывающее окно (библиотека Divi)» выберите имя макета, которое вы дали ему при создании внешнего вида pop-up. Затем установите остальные настройки: триггеры, способ закрытия окна, способ появления, положение на странице и т. д.

Не всегда нужно, чтобы pop-up появлялся при нажатии на кнопку. Если вы хотите, чтобы он появлялся при входе на сайт или через некоторое время после входа, на шаге 5 в строке «Триггер» измените параметр, например на Загрузка страницы, а в строке «Задержка по времени» укажите количество секунд, через которое всплывающее окно должно появиться на экране пользователя.

Чтобы сохранить настройки, нажмите на галочку.

Готово, в нашем примере всплывающее окно будет появляться при нажатии на кнопку «Хочу подарок»:

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

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

Очень удобно использовать PopUp окна в связке с ajax, но это уже тема другого урока.

Всё больше и больше в сети начинает появляться веб-ресурсов, которые используют всплывающие окна PopUp. В пример можно привести всем знакомые социальные сети. ~~Все лишние данные со скриншотов удалены.~~

Вконтакте

Facebook

Twitter

Думаю достаточно доводов, чтобы начать изучать вопрос: как же сделать на своем сайте всплывающее окно PopUp.

Постановка задачи(ТЗ)

Необходимо создать поверх всего сайта всплывающее окно с затемнением экрана.

Решение

Способ 1

Результат:

Очень часто предлагают использовать:

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

Способ 2

Этот способ не отличается кардинально от Способа 1, но я считаю его более удобным.

Html (без изменений)

Результат аналогичный

Благодаря свойству: min-height:100%; наш блок «затемнение» обрел ширину в 100% и минимальную высоту в 100% экрана.

Единственным минусом данного способа является то, что Internet Explorer поддерживает данное свойство только с версии 8.0.

Добавление магии на Jquery

Теперь добавим ссылки для скрытия/отображение нашего всплывающего окна.

Для этого необходимо подключить библиотеку JQuery и небольшой скрипт:

Также необходимо обновить Html:

Результат

Теперь при загрузке страницы всплывающее окно PopUp скроется.

Если мы нажмем на ссылку «Show popup», у нас появится всплывающее окно. А если нажать на ссылку «Hide popup», то всплывающее окно вновь скроется.

Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.

В итоге было задумано сделать собственное простое решение.

Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:

Arctic Modal,
jquery-modal,
iziModal,
Micromodal.js,
tingle.js,
Bootstrap Modal (из библиотеки Bootstrap) и др.

(в статье не рассматриваем решения на базе Frontend-фреймворков)

Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.

Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».

Итак, чтобы нам хотелось видеть?

Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.

Начнём с разметки.

1. Разметка HTML и CSS

1.1. Каркас модальных окон

Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.

Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):

Сделаем так, чтобы .hystmodal растягивался на всё окно браузера и закрывал собой содержимое страницы. Чтобы этого добиться, установим фиксированное позиционирование в CSS и приравняем свойства top, bottom, left и right к нулю.

В этом коде сделаны ещё две вещи:

Так как мы хотим центрировать окно внутри страницы, превращаем .hystmodal в flex-контейнер с выравниваем его потомков по центру по вертикали и горизонтали.
Окно может быть больше высоты экрана браузера, поэтому мы устанавливаем overflow-y: auto , чтобы при переполнении возникала полоса прокрутки. Также, для сенсорных экранов (в основном для Safari) нам стоит установить свойство -webkit-overflow-scrolling: touch , чтобы сенсорная прокрутка работала именно на этом блоке а не на странице.

Теперь установим стили для самого окна.

Кажется возникли сложности.

Проблема №1. Если высота окна больше высоты окна браузера, то контент окна будет обрезан сверху.

Это возникает из-за свойства justify-content: center . Оно позволяет нам удобно выровнять потомков по основной оси (по вертикали), но если потомок становится больше родителя то часть его становится недоступной даже при прокручиваемом контейнере. Подробнее можно посмотреть на stackoverflow. Решение – установить justify-content: flex-start , а потомку установить margin:auto . Это выровняет его по центру.

Проблема №2. В ie-11 если высота окна больше высоты окна браузера, то фон окна обрезается.

Решение: мы можем установить flex-shrink:0 потомку – тогда обрезки не происходит.

Проблема №3. В браузерах кроме Chrome нет отступа от нижней границы окна (т.е. padding-bottom не сработал).

Сложно сказать баг это браузеров или наоборот соответствует спецификации, но решения два:

установить псевдоэлемент ::after после потомка и дать ему высоту вместо padding
обернуть элемент в дополнительный блок и дать отступы уже ему.

Воспользуемся вторым методом. Добавим обертку .hystmodal__wrap . Так мы заодно обойдём и проблему №1, а вместо padding у родителя установим margin-top и margin-top у самого .hystmodal__window .

Наш итоговый html:

В код также добавлены некоторые aria и role атрибуты для обеспечения доступности.

Обновленный код CSS для обертки и окна.

1.2 Скрываем окно

Сейчас наше окно всегда видно. Когда говорят о скрытии элементов, первое что приходит на ум это переключать свойство display со значения none до нашего значения flex.

Но этот подход нас не устроит, ведь свойство display не анимируется. Все переходы дочерних элементов, указанные в свойстве transition, работать не будут.

Нам поможет другое свойство visibility:hidden . Оно скроет окно визуально, хотя и зарезервирует под него место. А так как все будущие окна на странице имеют фиксированное
позиционирование – они будут полностью скрыты и не повлияют на остальную страницу. Кроме того, на элементы с visibility:hidden нельзя установить фокус с клавиатуры, а от скрин-ридеров мы уже скрыли окна с помощью атрибута aria-hidden="true" .

Добавим также классы для открытого окна:

1.3 Оформление подложки

В лучшем случае, нам нужен отдельный html-элемент в качестве оверлея. Можно использовать и имеющийся элемент модального окна .hystmodal в качестве оверлея, но тогда анимация на этом элементе (например переход opacity) будет затрагивать и внутренние элементы. В итоге, не получится анимировать разные свойства для окна и оверлея отдельно.

Просто разместим элемент .hystmodal__shadow прямо перед закрывающим . В будущем, сделаем так, чтобы этот элемент создавался автоматически из js при инициализации библиотеки.

1.4 Отключение прокрутки страницы

Когда модальное окна открывается, мы хотим, чтобы страница под ним не прокручивалась.
Самый простой способ этого добиться — повесить overflow:hidden для body или html, когда окно открывается. Однако с этим есть проблема:

Проблема №4. В браузере Safari на iOS страница будет прокручиваться, даже если на тег html или body повешен overflow:hidden .
Решается двумя способами, либо блокированием событий прокрутки (touchmove, touchend или touchsart) из js вида:

Однако при этом блокируется и прокрутка самого модального окна, а также все прокручиваемые блоки внутри окна, если они будут. Требуется дополнительные проверки селекторов из js, что приводит к усложнению кода, поэтому рассмотрим другой вариант.

ps: можно конечно применить библиотеку scroll-lock, в которую заложено это решение, но в статье было решено воспользоваться другим вариантом.

Другое решение – основано частично на CSS. Пусть когда окно открывается, на элемент будет добавляться класс .hystmodal__opened :

Благодаря position:fixed , окно не будет прокручиваться даже в safari, однако здесь тоже не всё гладко:

Проблема №5. При открытии/закрытии окна страница прокручивается в начало.
Действительно, это происходит из-за изменения свойства position, текущая прокрутка окна сбрасывается.

Для решения, нам нужно написать следующий JS (упрощенно):

При открытии:

При закрытии:

Отлично, приступим к JavaScript коду.

2. Код JavaScript

2.2 Каркас библиотеки

Нам нужна совместимость со старыми браузерами включая IE11 поэтому нам нужно выбрать из 2 вариантов кодинга:

Разрабатывать на старом стандарте ES5, и использовать только те фичи, которые поддерживают все браузеры.
Применить современный синтаксис ES6, но подключить транспайлер Babel, который автоматически преобразует код для всех браузеров и встроит необходимые полифилы.
Было принято решение использовать второй вариант, с прицелом на будущее.
Приступим.

Основа нашей библиотеки единственный класс HystModal . Ниже я приведу скелет кода с комментариями, а потом добавим остальной функционал.

Итак, мы описали класс HystModal . Чтобы всё работало, нужно всего лишь подключить наш скрипт и создать экземпляр класса:

Проблема №6: если в браузере есть фиксированный скроллбар (который влияет на ширину страницы), то при открытии/закрытии окна происходит сдвиг контента, когда полоса прокрутки то появляется то пропадает.

Действительно – скроллбар пропадает и контент страницы перераспределяется. Чтобы решить эту проблему, можно добавить отступ справа к тегу html, равный ширине скроллбара когда он пропадает.

Однако ширина скроллбара может быть разной в разных браузерах и операционных системах. Кроме того, скроллбара может не быть на коротких страницах или он может быть плавающим (например, в Chrome на Android). Поэтому ширину нужно вычислять динамически из скрипта.

Дополним метод _bodyScrollControl()

Почему код метода close() упрощён? Дело в том, что просто убирая классы CSS у элементов, мы не можем анимировать закрытие окна.

Проблема №7. При закрытии окна, свойство visibility:hidden применяется сразу и не даёт возможности анимировать закрытие окна.

Причина этого известна: свойство visibility:hidden не анимируется. Конечно, можно обойтись без анимации, но, если она нужна, сделаем следующее.

Создадим дополнительный CSS-класс .hystmodal—moved почти такой-же как и .hystmodal--active

Затем при закрытии сначала добавим этот класс к окну и повесим обработчик события «transitionend» на модальном окне. Затем удалим класс `.hystmodal—active , таким образом вызывая css-переход. Как только переход завершится, сработает обработчик события «transitionend», в котором сделаем всё остальное и удалим сам обработчик события.

Ниже: новая версия методов закрытия окна:

Вы заметили, что мы создали ещё один метод _closeAfterTransition() и перенесли основную логику закрытия туда. Это нужно, чтобы удалить обработчик события transitionend после закрытия окна, ведь в метод removeEventListener необходимо передать именно ту функцию, которую мы привязывали.

Кроме того, если анимация не будет нужна, можно просто вызвать this._closeAfterTransition() не вешая его на событие.

Как мы помним, внутри addEventListener, this будет указывать на селектор где происходит событие, а не на наш экземпляр класса, поэтому в конструкторе нужно добавить ещё одну строчку для жёсткой привязки метода к this.

2.2 Закрытие окна по клику на оверлей

Нам нужно обработать ещё одно событие – закрытие окна по клику на элемент подложки .hystmodal__wrap . Мы можем повесить обработчик клика на документ для делегирования события как при открытии и проверить что событие произошло на .hystmodal__wrap примерно так:

Это будет работать, но есть один малозаметный недостаток.

Проблема №8. Если кнопку мыши нажать внутри окна, а отпустить за его пределами (над подложкой), окно закрывается.

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

Окно закрывается потому что по спецификации, если нажатие и отпускание мыши были на разных элементах, то событие click сработает на самом ближайшем общем для них элементе, а у нас это как раз .hystmodal__wrap .

Мы могли бы решить это изменением html, добавляя ещё один div сразу после .hystmodal__window и размещая его визуально под окном. Но нам бы не хотелось добавлять лишний пустой div ещё сильнее усложняя разметку.

Мы можем разбить наш addEventListener на два отдельных обработчика: для событий mousedown и mouseup и будем проверять чтобы оба события происходили именно на .hystmodal__wrap . Добавим новые обработчики событий в наш метод eventsFeeler()

2.3 Управление фокусом

У нас заготовлено два метода для управления фокусом: focusContol() для переноса фокуса внутрь окна и обратно при его закрытии, а также focusCatcher(event) для блокирования ухода фокуса из окна.

Решения для фокуса были реализованы аналогично js-библиотеке «Micromodal» (Indrashish Ghosh). А именно:

1. В служебный массив сохраним все css селекторы на которых может быть установлен фокус (свойство помещаем в init()):

2. В методе focusContol() находим первый такой селектор в окне и устанавливаем на него фокус, если окно открывается. Если же окно закрывается – то переводим фокус на this.starter :

3. В методе focusCatcher() находим в окне и превращаем в массив коллекцию всех элементов на которых может быть фокус. И проверяем, если фокус должен был выйти на пределы окна, то вместо этого устанавливаем фокус снова на первый или последний элемент (ведь фокус можно переключать как по Tab так и по Shift+Tab в обратную сторону).

Результирующий код метода focusCatcher:

По сути мы реализовали все необходимое для успешного создания модальных окон, осталось ещё несколько дел:

Проблема №9. В IE11 не работают методы Element.closest() и Object.assign() .

Для поддержки Element.closest, воспользуемся полифилами для closest и matches от MDN.

Можно их вставить просто так, но так как у нас проект всё равно собирается webpack, то удобно воспользоваться пакетом element-closest-polyfill который просто вставляет этот код.

Для поддержки Object.assign , можно воспользоваться уже babel-плагином @babel/plugin-transform-object-assign

3. Заключение и ссылки

Повторяя начало статьи, всё изложенное выше, я оформил в маленькую библиотеку hystModal под MIT-лицензией. Вышло 3 кБ кода при загрузке с gzip. Ещё написал для неё подробную документацию на русском и английском языке.

Что вошло ещё в библиотеку hystModal, чего не было в статье:

Настройки (вкл/выкл управление фокусом, варианты закрытия, ожидание анимации закрытия)
Коллбеки (функции вызывающиеся перед открытием окна и после его закрытия (в них передаётся объект модального окна))
Добавлен запрет на какие-либо действия пока анимация закрытия окна не завершится, а также ожидание анимации закрытия текущего окна перед открытием нового (если окно открывается из другого окна).
Оформление кнопки-крестика закрытия в CSS
Минификация CSS и JS плагинами Webpack.

Если вам будет интересна эта библиотека, буду рад звёздочке в GitHub, или напишите в Issues о найденных багах. (Особенно большие проблемы, наверное, в грамматике английской версии документации, так как мои знания языка пока на начальном уровне. Связаться со мной также можно в Instagram

Всплывающие окна, они же модальные окна на сайте — зло. Так прямым текстом и говорит автор первого в мире поп-ап скрипта Итан Цукерберг и сожалеет о содеянном. Итан хотел показывать посетителям сайтов информацию с учетом предпочтений. В погоне за данными пользователей создатели сайтов эпохи дикого интернета дискредитировали благую идею, а нам с этим жить. В этой статье предложим готовые варианты и дадим советы как настроить всплывающие окна так, чтобы клиент влюбился в ваш сайт.

Мир против плохой рекламы и это нельзя игнорировать

В 2017 году исследование отношения людей к рекламе поставило точку в этом вопросе — не показывайте пользователям всплывающие окна, если хотите их сохранить. Из 23 видов рекламы 452 участника теста однозначно отдали антипремию всплывающим окнам. А в 2018 Chrome и Yandex взялись улучшать пользовательский экспириенс, сворачивая назойливую рекламу. В Chrome под нож пошли 12 видов рекламы, включая назойливые всплывающие окна. Даже одно неправильно всплывающее окно позволит гуглу полностью заблокировать рекламный контент на сайте. Хуже этого только хейт-мейл пользователей .

Как не попасть под санкции гугла

Чтобы встроенный в гугл блокировщик не забанил рекламу, сделайте ее беззвучной, спокойной и легко закрывающейся. Google Chrome использует большинство пользователей в России — имеет смысл проверить сайт на соответствие рекламной политике гугла.

Всплывающие окна правильно

Попробуйте следовать кантовскому императиву. Мы гуляем по парку в новом городе, ищем классный вид на площадь. И тут вылетает зазывала в кислотной рубахе, угрожает покатать на катере. Сует буклеты, просит данные в анкету да еще и не уходит. Вряд ли мы бы сели в лодку этого человека — мы даже не видим воду поблизости. Так и в интернете: все должно быть уместным . Особенно противоречивое всплывающее окно.

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

Узнайте среднее время посещения сайта в веб-аналитике. Пусть окна всплывают немного до выхода пользователя с сайта или страницы и как минимум после полной загрузки страницы.

Позаботьтесь об однородном дизайне. В парке, где по условию гуляет наш клиент, лучше обойтись без вызывающе ярких дизайнов и клоунских цветов. Тогда и гулять приятнее, и поплавать хочется. Кислотные футболки пусть лежат на барахолке.

Органично вписывающееся в дизайн-код сайта всплывающее окно убедит посетителя в отсутствии подводных камней. Пользователь дочитал статью-предложите скачать тематический сборник в приятном глазу лайтбоксе. Гугл любит лайтбоксы.

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

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

Сделайте окно удобным. Любой элемент сайта должен быть удобным в использовании. Позаботьтесь об удобных всплывающих окнах и емко расположите на них:

Если предложение не получается емко уместить, разбейте его на две части, на два всплывающих окна. В первом уточните намерение, во втором расположите поле для ввода данных. Не забывайте поощрять пользователя, дайте ему понять что вам не все равно. Хоть спасибо скажите за имейл. Даже зазывалы обходительны с туристами — главное не фамильярничать.

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

Вы почти дочитали статью до конца — похоже вам интересна тема! Подпишитесь на нашу рассылку.

Попробуйте готовые решения

Ниже мы привели самые удобные в использовании сервисы по настройке всплывающих окон, справится даже новичок. Учитывайте правила выше, не будьте зазывалой и люди к вам потянутся)

Стоит $0-15-99 . Есть бесплатная версия со всеми базовыми функциями. Настройки простые, хорошая аналитика, но мало опций для таргетинга.

Простенький сервис с хорошим бесплатным тарифом GetSiteControl

Стоит $0-19-29. Недорого и много шаблонов, но не убирается лого и продвинутая аналитика возможна только в платном тарифе.

Достойный сервис с хорошим бесплатным тарифом Mailmunch

Стоит $0-15-25-75. Недорогой сервис с хорошей аналитикой и адаптивным дизайном. Неплохие настройки таргетинга, глубокая кастомизация. Но мало шаблонов в бесплатном тарифе и нельзя убрать лого.

Слабый сервис с множеством виджетов Sumome

Стоит $0-29-79. Много виджетов, хорошая кастомизация и дизайн, но дороговато. Очень ограниченная бесплатная версия без возможности докупать виджеты, нельзя убрать лого.

Полностью бесплатный сервис AddThis

Простой интерфейс, адаптивный дизайн. Хорошая аналитика и настройки таргетинга.

Русский сервис, очень много шаблонов Witget

Стоит $15-30-90-300. Полностью поддерживает русский язык. Очень много шаблонов , адаптивный дизайн и статистика. Нет бесплатной версии, есть короткий триал.

Дорогой сервис с хорошим инструментарием для профессионалов Picreel

Стоит $19-69-149-399. Много шаблонов, есть интеграция с crm-системами и email-сервисами. Адаптивный дизайн. Хорошая аналитика и таргетинг.

Самый продвинутый сервис Optimonk

Стоит $29-59-99-199-399. Много шаблонов, есть интеграция с crm-системами и email-сервисами. Профессиональная настрйка таргетинга и аналитика, но дороговато.

Всплывающие окна — спорная технология. Часто они раздражают, особенно если показывают рекламу, но иногда без них не получается нормально пользоваться сайтом. Поэтому в настройках Internet Explorer есть опции для блокировки всплывающих окон и разрешения их появления.

Разрешение всплывающих окон для всех сайтов

Разблокировать появление всплывающих окон можно через две вкладки в свойствах браузера.

Открываем главное меню Internet Explorer.
Переходим в раздел «Свойства браузера».

3. Открываем вкладку «Безопасность».

4. В поле «Уровень безопасности» нажимаем на кнопку «Другой».

5. Находим в списке параметр «Блокировать всплывающие окна» и выбираем для него значение «Отключить».

6. Применяем конфигурацию и перезагружаем компьютер.

После перезагрузки нужно вернуться в свойства браузера и зайти на вкладку «Конфиденциальность». Здесь тоже есть параметр, который отвечает за блокировку всплывающих окон. Нам нужно убедиться в том, что возле него не стоит галочка.

Разрешение всплывающих окон для отдельных сайтов

Можно не отключать блокировку всплывающих окон, а вручную указать, каким сайтам можно их показывать.

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

Мы можем вручную настроить список сайтов, которые будут игнорировать запрет на запуск всплывающих окон.

Списком исключений можно управлять — удалять из него отдельные записи или все домены. Это удобно, если вы не хотите постоянно натыкаться на всплывающие окна, но на некоторых сайтах без них никак нельзя.

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