Что такое popup windows

Обновлено: 07.07.2024

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

Как найти золотую середину? Стоит ли вообще использовать всплывающие окна? Если да, то для каких целей? На эти вопросы мы ответим в статье.

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

Всплывающие окна – это отличный инструмент для привлечения подписчиков, продвижения продукта, оказания техподдержки, а также информирования аудитории.

Попапы помогают увеличить продажи, так как концентрируют внимание целевой аудитории в направлении конверсионного действия, что подтверждается множеством практических кейсов. В среднем, коэффициент конверсии подписки на email-рассылку посредством попапов составляет от 1,95% до 2,9%. Это означает, что из 100 человек, которые увидят всплывающее окно на вашем сайте, вы можете получить 2-3 адреса электронной почты.

Несомненно, есть и более впечатляющие примеры. Некоторым удавалось поднять продажи на 162% посредством попапов (случилось это, правда, в 2005 году). А в 2012 году один из клиентов AWeber в результате экспериментов со всплывающими окнами получил + 1,375% подписок.

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

В данном уроке я не открою тайну для матерых верстальщиков и гуру 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», то всплывающее окно вновь скроется.

Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.

… и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.

Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном <div> , так что попапы используются не каждый день.

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

Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:

Блокировка попапов

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

Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события onclick ).

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

Что, если попап должен открываться в результате onclick , но не сразу, а только после выполнения setTimeout ? Здесь все не так-то просто.

Попап откроется в Chrome, но будет заблокирован в Firefox.

Но если мы уменьшим тайм-аут до одной секунды, то попап откроется и в Firefox:

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

Полный синтаксис window.open

Синтаксис открытия нового окна: window.open(url, name, params) :

url URL для загрузки в новом окне. name Имя нового окна. У каждого окна есть свойство window.name , в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нем, в противном случае откроется новое окно. params Строка параметров для нового окна. Содержит настройки, разделённые запятыми. Важно помнить, что в данной строке не должно быть пробелов. Например width=200,height=100 .

Параметры в строке params :

  • Позиция окна:
    • left/top (числа) – координаты верхнего левого угла нового окна на экране. Существует ограничение: новое окно не может быть позиционировано вне видимой области экрана.
    • width/height (числа) – ширина и высота нового окна. Существуют ограничения на минимальную высоту и ширину, которые делают невозможным создание невидимого окна.
    • menubar (yes/no) – позволяет отобразить или скрыть меню браузера в новом окне.
    • toolbar (yes/no) – позволяет отобразить или скрыть панель навигации браузера (кнопки вперёд, назад, перезагрузки страницы) нового окна.
    • location (yes/no) – позволяет отобразить или скрыть адресную строку нового окна. Firefox и IE не позволяют скрывать эту панель по умолчанию.
    • status (yes/no) – позволяет отобразить или скрыть строку состояния. Как и с адресной строкой, большинство браузеров будут принудительно показывать её.
    • resizable (yes/no) – позволяет отключить возможность изменения размера нового окна. Не рекомендуется.
    • scrollbars (yes/no) – позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

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

    Пример: минималистичное окно

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

    В этом примере большинство настроек заблокированы и само окно находится за пределами видимой области экрана. Посмотрим, что получится в результате. Большинство браузеров «исправит» странные значения – как, например, нулевые width/height и отрицательные left/top . Например, Chrome установит высоту и ширину такого окна равной высоте и ширине экрана, так что попап будет занимать весь экран.

    Давайте исправим значения и зададим нормальные координаты ( left и top ) и значения размеров окна ( width и height ):

    Большинство браузеров выведет окно с заданными нами настройками.

    Правила для опущенных параметров:

    • Если третий аргумент при вызове open отсутствует или он пустой, будут использованы настройки окна по умолчанию.
    • Если строка параметров передана, но некоторые параметры yes/no пропущены, то считается, что указано no , так что соответствующие возможности будут отключены, если на это нет ограничений со стороны браузера. Поэтому при задании параметров убедитесь, что вы явно указали все необходимые yes.
    • Если координаты left/top не заданы, браузер попытается открыть новое окно рядом с предыдущим открытым окном.
    • Если не заданы размеры окна width/height , браузер откроет новое окно с теми же размерами, что и предыдущее открытое окно.

    Доступ к попапу из основного окна

    Вызов open возвращает ссылку на новое окно. Эта ссылка может быть использована для управления свойствами окна, например, изменения положения и др.

    Например, здесь мы генерируем содержимое попапа из JavaScript:

    А здесь содержимое окна модифицируется после загрузки:

    Обратите внимание: сразу после window.open новое окно ещё не загружено. Это демонстрируется в строке (*) . Так что нужно ждать onload , чтобы его изменить. Или же поставить обработчик DOMContentLoaded на newWin.document .

    Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).

    Доступ к открывшему окну из попапа

    Попап также может обратиться к открывшему его окну по ссылке window.opener . Она равна null для всех окон, кроме попапов.

    Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на «Тест»:

    Так что связь между окнами двусторонняя: главное окно и попап имеют ссылки друг на друга.

    Закрытие попапа

    Чтобы закрыть окно: win.close()

    Для проверки, закрыто ли окно: win.closed .

    Технически метод close() доступен для любого окна, но window.close() будет игнорироваться большинством браузеров, если window не было создано с помощью window.open() . Так что он сработает только для попапов.

    Если окно закрыто, то его свойство closed имеет значение true . Таким образом можно легко проверить, закрыт ли попап (или главное окно) или все ещё открыт. Пользователь может закрыть его в любой момент, и наш код должен учитывать эту возможность.

    Этот код откроет и затем закроет окно:

    Прокрутка и изменение размеров

    Методы для передвижения и изменения размеров окна:

    win.moveBy(x,y) Переместить окно относительно текущей позиции на x пикселей вправо и y пикселей вниз. Допустимы отрицательные значения (для перемещения окна влево и вверх). win.moveTo(x,y) Переместить окно на координаты экрана (x,y) . win.resizeBy(width,height) Изменить размер окна на указанные значения width/height относительно текущего размера. Допустимы отрицательные значения. win.resizeTo(width,height) Изменить размер окна до указанных значений.

    Также существует событие window.onresize .

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

    Методами JavaScript нельзя свернуть или развернуть («максимизировать») окно на весь экран. За это отвечают функции уровня операционной системы, и они скрыты от фронтенд-разработчиков.

    Методы перемещения и изменения размера окна не работают для свернутых и развёрнутых на весь экран окон.

    Прокрутка окна

    Мы уже говорили о прокрутке окна в главе Размеры и прокрутка окна.

    win.scrollBy(x,y) Прокрутить окно на x пикселей вправо и y пикселей вниз относительно текущей прокрутки. Допустимы отрицательные значения. win.scrollTo(x,y) Прокрутить окно до заданных координат (x,y) . elem.scrollIntoView(top = true) Прокрутить окно так, чтобы elem для elem.scrollIntoView(false) появился вверху (по умолчанию) или внизу.

    Также существует событие window.onscroll .

    Установка и потеря фокуса

    Теоретически, установить попап в фокус можно с помощью метода window.focus() , а убрать из фокуса – с помощью window.blur() . Также существуют события focus/blur , которые позволяют отследить, когда фокус переводится на какое-то другое окно.

    Раньше на «плохих» сайтах эти методы могли становиться средством манипуляции. Например:

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

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

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

    Но все-таки иногда методы фокусировки бывают полезны. Например:

    • Когда мы открываем попап, может быть хорошей идеей запустить для него newWindow.focus() . Для некоторых комбинаций браузера и операционной системы это устранит неоднозначность – заметит ли пользователь это новое окно.
    • Если нужно отследить, когда посетитель использует веб-приложение, можно отслеживать window.onfocus/onblur . Это позволит ставить на паузу и продолжать выполнение анимаций и других интерактивных действий на странице. При этом важно помнить, что blur означает, что окно больше не в фокусе, но пользователь может по-прежнему видеть его.

    Итого

    Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, а показать – в элементе <div> , расположенным над страницей ( z-index ). Ещё одна альтернатива – тег <iframe> .

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

    Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.

    … и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.

    Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном <div> , так что попапы используются не каждый день.

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

    Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:

    Блокировка попапов

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

    Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события onclick ).

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

    Что, если попап должен открываться в результате onclick , но не сразу, а только после выполнения setTimeout ? Здесь все не так-то просто.

    Попап откроется в Chrome, но будет заблокирован в Firefox.

    Но если мы уменьшим тайм-аут до одной секунды, то попап откроется и в Firefox:

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

    Полный синтаксис window.open

    Синтаксис открытия нового окна: window.open(url, name, params) :

    url URL для загрузки в новом окне. name Имя нового окна. У каждого окна есть свойство window.name , в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нем, в противном случае откроется новое окно. params Строка параметров для нового окна. Содержит настройки, разделённые запятыми. Важно помнить, что в данной строке не должно быть пробелов. Например width=200,height=100 .

    Параметры в строке params :

    • Позиция окна:
      • left/top (числа) – координаты верхнего левого угла нового окна на экране. Существует ограничение: новое окно не может быть позиционировано вне видимой области экрана.
      • width/height (числа) – ширина и высота нового окна. Существуют ограничения на минимальную высоту и ширину, которые делают невозможным создание невидимого окна.
      • menubar (yes/no) – позволяет отобразить или скрыть меню браузера в новом окне.
      • toolbar (yes/no) – позволяет отобразить или скрыть панель навигации браузера (кнопки вперёд, назад, перезагрузки страницы) нового окна.
      • location (yes/no) – позволяет отобразить или скрыть адресную строку нового окна. Firefox и IE не позволяют скрывать эту панель по умолчанию.
      • status (yes/no) – позволяет отобразить или скрыть строку состояния. Как и с адресной строкой, большинство браузеров будут принудительно показывать её.
      • resizable (yes/no) – позволяет отключить возможность изменения размера нового окна. Не рекомендуется.
      • scrollbars (yes/no) – позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

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

      Пример: минималистичное окно

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

      В этом примере большинство настроек заблокированы и само окно находится за пределами видимой области экрана. Посмотрим, что получится в результате. Большинство браузеров «исправит» странные значения – как, например, нулевые width/height и отрицательные left/top . Например, Chrome установит высоту и ширину такого окна равной высоте и ширине экрана, так что попап будет занимать весь экран.

      Давайте исправим значения и зададим нормальные координаты ( left и top ) и значения размеров окна ( width и height ):

      Большинство браузеров выведет окно с заданными нами настройками.

      Правила для опущенных параметров:

      • Если третий аргумент при вызове open отсутствует или он пустой, будут использованы настройки окна по умолчанию.
      • Если строка параметров передана, но некоторые параметры yes/no пропущены, то считается, что указано no , так что соответствующие возможности будут отключены, если на это нет ограничений со стороны браузера. Поэтому при задании параметров убедитесь, что вы явно указали все необходимые yes.
      • Если координаты left/top не заданы, браузер попытается открыть новое окно рядом с предыдущим открытым окном.
      • Если не заданы размеры окна width/height , браузер откроет новое окно с теми же размерами, что и предыдущее открытое окно.

      Доступ к попапу из основного окна

      Вызов open возвращает ссылку на новое окно. Эта ссылка может быть использована для управления свойствами окна, например, изменения положения и др.

      Например, здесь мы генерируем содержимое попапа из JavaScript:

      А здесь содержимое окна модифицируется после загрузки:

      Обратите внимание: сразу после window.open новое окно ещё не загружено. Это демонстрируется в строке (*) . Так что нужно ждать onload , чтобы его изменить. Или же поставить обработчик DOMContentLoaded на newWin.document .

      Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).

      Доступ к открывшему окну из попапа

      Попап также может обратиться к открывшему его окну по ссылке window.opener . Она равна null для всех окон, кроме попапов.

      Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на «Тест»:

      Так что связь между окнами двусторонняя: главное окно и попап имеют ссылки друг на друга.

      Закрытие попапа

      Чтобы закрыть окно: win.close()

      Для проверки, закрыто ли окно: win.closed .

      Технически метод close() доступен для любого окна, но window.close() будет игнорироваться большинством браузеров, если window не было создано с помощью window.open() . Так что он сработает только для попапов.

      Если окно закрыто, то его свойство closed имеет значение true . Таким образом можно легко проверить, закрыт ли попап (или главное окно) или все ещё открыт. Пользователь может закрыть его в любой момент, и наш код должен учитывать эту возможность.

      Этот код откроет и затем закроет окно:

      Прокрутка и изменение размеров

      Методы для передвижения и изменения размеров окна:

      win.moveBy(x,y) Переместить окно относительно текущей позиции на x пикселей вправо и y пикселей вниз. Допустимы отрицательные значения (для перемещения окна влево и вверх). win.moveTo(x,y) Переместить окно на координаты экрана (x,y) . win.resizeBy(width,height) Изменить размер окна на указанные значения width/height относительно текущего размера. Допустимы отрицательные значения. win.resizeTo(width,height) Изменить размер окна до указанных значений.

      Также существует событие window.onresize .

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

      Методами JavaScript нельзя свернуть или развернуть («максимизировать») окно на весь экран. За это отвечают функции уровня операционной системы, и они скрыты от фронтенд-разработчиков.

      Методы перемещения и изменения размера окна не работают для свернутых и развёрнутых на весь экран окон.

      Прокрутка окна

      Мы уже говорили о прокрутке окна в главе Размеры и прокрутка окна.

      win.scrollBy(x,y) Прокрутить окно на x пикселей вправо и y пикселей вниз относительно текущей прокрутки. Допустимы отрицательные значения. win.scrollTo(x,y) Прокрутить окно до заданных координат (x,y) . elem.scrollIntoView(top = true) Прокрутить окно так, чтобы elem для elem.scrollIntoView(false) появился вверху (по умолчанию) или внизу.

      Также существует событие window.onscroll .

      Установка и потеря фокуса

      Теоретически, установить попап в фокус можно с помощью метода window.focus() , а убрать из фокуса – с помощью window.blur() . Также существуют события focus/blur , которые позволяют отследить, когда фокус переводится на какое-то другое окно.

      Раньше на «плохих» сайтах эти методы могли становиться средством манипуляции. Например:

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

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

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

      Но все-таки иногда методы фокусировки бывают полезны. Например:

      • Когда мы открываем попап, может быть хорошей идеей запустить для него newWindow.focus() . Для некоторых комбинаций браузера и операционной системы это устранит неоднозначность – заметит ли пользователь это новое окно.
      • Если нужно отследить, когда посетитель использует веб-приложение, можно отслеживать window.onfocus/onblur . Это позволит ставить на паузу и продолжать выполнение анимаций и других интерактивных действий на странице. При этом важно помнить, что blur означает, что окно больше не в фокусе, но пользователь может по-прежнему видеть его.

      Итого

      Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, а показать – в элементе <div> , расположенным над страницей ( z-index ). Ещё одна альтернатива – тег <iframe> .

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

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