JavaScript Popup Boxes
JavaScript has three kind of popup boxes: Alert box, Confirm box, and Prompt box.
Alert Box
An alert box is often used if you want to make sure information comes through to the user.
When an alert box pops up, the user will have to click "OK" to proceed.
Syntax
The window.alert() method can be written without the window prefix.
Example
Confirm Box
A confirm box is often used if you want the user to verify or accept something.
When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed.
If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false.
Syntax
The window.confirm() method can be written without the window prefix.
Example
Prompt Box
A prompt box is often used if you want the user to input a value before entering a page.
When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value.
If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null.
Syntax
The window.prompt() method can be written without the window prefix.
Example
Line Breaks
To display line breaks inside a popup box, use a back-slash followed by the character n.
Открытие окон и методы window
Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.
… и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.
Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном <div> , так что попапы используются не каждый день.
Кроме того, попапы не очень хороши для мобильных устройств, которые не умеют показывать несколько окон одновременно.
Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:
- Попап – это отдельное окно со своим JavaScript-окружением. Так что открытие попапа со стороннего, не доверенного сайта вполне безопасно
- Открыть попап очень просто.
- Попап может производить навигацию (менять URL) и отсылать сообщения в основное окно.
Блокировка попапов
В прошлом злонамеренные сайты заваливали посетителей всплывающими окнами. Такие страницы могли открывать сотни попапов с рекламой. Поэтому теперь большинство браузеров пытаются заблокировать всплывающие окна, чтобы защитить пользователя.
Всплывающее окно блокируется в том случае, если вызов window.open произошёл не в результате действия посетителя (например, события onclick ).
Таким образом браузеры могут защитить пользователя от появления нежелательных попапов, при этом не отключая попапы полностью.
Полный синтаксис 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).
Иначе, например, если основное окно с site.com , а попап с gmail.com , это невозможно по соображениям пользовательской безопасности. Детали см. в главе Общение между окнами.
Доступ к открывшему окну из попапа
Попап также может обратиться к открывшему его окну по ссылке 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> .
Если мы открываем попап, хорошей практикой будет предупредить пользователя об этом. Иконка открывающегося окошка на ссылке поможет посетителю понять, что происходит и не потерять оба окна из поля зрения.
Popups and window methods
A popup window is one of the oldest methods to show additional document to user.
Basically, you just run:
…And it will open a new window with given URL. Most modern browsers are configured to open url in new tabs instead of separate windows.
Popups exist from really ancient times. The initial idea was to show another content without closing the main window. As of now, there are other ways to do that: we can load content dynamically with fetch and show it in a dynamically generated <div> . So, popups is not something we use everyday.
Also, popups are tricky on mobile devices, that don’t show multiple windows simultaneously.
Still, there are tasks where popups are still used, e.g. for OAuth authorization (login with Google/Facebook/…), because:
- A popup is a separate window which has its own independent JavaScript environment. So opening a popup from a third-party, non-trusted site is safe.
- It’s very easy to open a popup.
- A popup can navigate (change URL) and send messages to the opener window.
Popup blocking
In the past, evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user.
Most browsers block popups if they are called outside of user-triggered event handlers like onclick .
This way users are somewhat protected from unwanted popups, but the functionality is not disabled totally.
window.open
The syntax to open a popup is: window.open(url, name, params) :
url An URL to load into the new window. name A name of the new window. Each window has a window.name , and here we can specify which window to use for the popup. If there’s already a window with such name – the given URL opens in it, otherwise a new window is opened. params The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: width=200,height=100 .
Settings for params :
- Position:
- left/top (numeric) – coordinates of the window top-left corner on the screen. There is a limitation: a new window cannot be positioned offscreen.
- width/height (numeric) – width and height of a new window. There is a limit on minimal width/height, so it’s impossible to create an invisible window.
- menubar (yes/no) – shows or hides the browser menu on the new window.
- toolbar (yes/no) – shows or hides the browser navigation bar (back, forward, reload etc) on the new window.
- location (yes/no) – shows or hides the URL field in the new window. FF and IE don’t allow to hide it by default.
- status (yes/no) – shows or hides the status bar. Again, most browsers force it to show.
- resizable (yes/no) – allows to disable the resize for the new window. Not recommended.
- scrollbars (yes/no) – allows to disable the scrollbars for the new window. Not recommended.
There is also a number of less supported browser-specific features, which are usually not used. Check window.open in MDN for examples.
Example: a minimalistic window
Let’s open a window with minimal set of features, just to see which of them browser allows to disable:
Here most “window features” are disabled and window is positioned offscreen. Run it and see what really happens. Most browsers “fix” odd things like zero width/height and offscreen left/top . For instance, Chrome open such a window with full width/height, so that it occupies the full screen.
Let’s add normal positioning options and reasonable width , height , left , top coordinates:
Most browsers show the example above as required.
Rules for omitted settings:
- If there is no 3rd argument in the open call, or it is empty, then the default window parameters are used.
- If there is a string of params, but some yes/no features are omitted, then the omitted features assumed to have no value. So if you specify params, make sure you explicitly set all required features to yes.
- If there is no left/top in params, then the browser tries to open a new window near the last opened window.
- If there is no width/height , then the new window will be the same size as the last opened.
Accessing popup from window
The open call returns a reference to the new window. It can be used to manipulate its properties, change location and even more.
In this example, we generate popup content from JavaScript:
And here we modify the contents after loading:
Please note: immediately after window.open , the new window isn’t loaded yet. That’s demonstrated by alert in line (*) . So we wait for onload to modify it. We could also use DOMContentLoaded handler for newWin.document .
Windows may freely access content of each other only if they come from the same origin (the same protocol://domain:port).
Otherwise, e.g. if the main window is from site.com , and the popup from gmail.com , that’s impossible for user safety reasons. For the details, see chapter Cross-window communication.
Accessing window from popup
A popup may access the “opener” window as well using window.opener reference. It is null for all windows except popups.
If you run the code below, it replaces the opener (current) window content with “Test”:
So the connection between the windows is bidirectional: the main window and the popup have a reference to each other.
Closing a popup
To close a window: win.close() .
To check if a window is closed: win.closed .
Technically, the close() method is available for any window , but window.close() is ignored by most browsers if window is not created with window.open() . So it’ll only work on a popup.
The closed property is true if the window is closed. That’s useful to check if the popup (or the main window) is still open or not. A user can close it anytime, and our code should take that possibility into account.
This code loads and then closes the window:
Moving and resizing
There are methods to move/resize a window:
win.moveBy(x,y) Move the window relative to current position x pixels to the right and y pixels down. Negative values are allowed (to move left/up). win.moveTo(x,y) Move the window to coordinates (x,y) on the screen. win.resizeBy(width,height) Resize the window by given width/height relative to the current size. Negative values are allowed. win.resizeTo(width,height) Resize the window to the given size.
There’s also window.onresize event.
To prevent abuse, the browser usually blocks these methods. They only work reliably on popups that we opened, that have no additional tabs.
JavaScript has no way to minify or maximize a window. These OS-level functions are hidden from Frontend-developers.
Move/resize methods do not work for maximized/minimized windows.
Scrolling a window
We already talked about scrolling a window in the chapter Window sizes and scrolling.
win.scrollBy(x,y) Scroll the window x pixels right and y down relative the current scroll. Negative values are allowed. win.scrollTo(x,y) Scroll the window to the given coordinates (x,y) . elem.scrollIntoView(top = true) Scroll the window to make elem show up at the top (the default) or at the bottom for elem.scrollIntoView(false) .
There’s also window.onscroll event.
Focus/blur on a window
Theoretically, there are window.focus() and window.blur() methods to focus/unfocus on a window. And there are also focus/blur events that allow to catch the moment when the visitor focuses on a window and switches elsewhere.
Although, in practice they are severely limited, because in the past evil pages abused them.
For instance, look at this code:
When a user attempts to switch out of the window ( window.onblur ), it brings the window back into focus. The intention is to “lock” the user within the window .
So browsers had to introduce many limitations to forbid the code like that and protect the user from ads and evils pages. They depend on the browser.
For instance, a mobile browser usually ignores window.focus() completely. Also focusing doesn’t work when a popup opens in a separate tab rather than a new window.
Still, there are some use cases when such calls do work and can be useful.
- When we open a popup, it might be a good idea to run newWindow.focus() on it. Just in case, for some OS/browser combinations it ensures that the user is in the new window now.
- If we want to track when a visitor actually uses our web-app, we can track window.onfocus/onblur . That allows us to suspend/resume in-page activities, animations etc. But please note that the blur event means that the visitor switched out from the window, but they still may observe it. The window is in the background, but still may be visible.
Summary
Popup windows are used rarely, as there are alternatives: loading and displaying information in-page, or in iframe.
If we’re going to open a popup, a good practice is to inform the user about it. An “opening window” icon near a link or button would allow the visitor to survive the focus shift and keep both windows in mind.
Модальное окно для сайта на чистом CSS и JavaScript
Модальное окно – это элемент интерфейса, которой визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы .
При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно).
Вызов модального окна можно привязать к различным событиям на странице, но в большинстве сценариев это осуществляется при нажатии на кнопку или ссылку.
Изображение модального окна:
Оно состоит из заголовка (хедера), основной части и футера.
В заголовке обычно выводят название окна и элемент, с помощью которого его можно закрыть. В основной части располагают содержимое, а в футере – кнопки для выполнения различных действий.
Подключение CSS и JavaScript-файлов к странице
Исходные коды модального окна расположены на GitHub в рамках проекта ui-components в папке modal .
Для установки модального окна на страницу необходимо подключить к ней файлы:
- CSS: modal.css ;
- JavaScript: modal.js .
Создание и настройка модального окна
Этот скрипт создаёт модальное окно динамически. То есть здесь не нужно вставлять какой-то HTML-код непосредственно на страницу. Реализовано это в коде через класс. Шаблон модального окна содержится в приватном свойстве #template :
Следовательно, для того, чтобы сделать модальное окно достаточно просто создать новый экземпляр класса ItcModal :
При создании окна вы можете сразу же его настроить, для этого в ItcModal необходимо передать аргумент в формате объекта:
Ключ title отвечает за заголовок, content – за содержимое, footerButtons – за кнопки в футере окна.
Эти ключи являются не обязательными . Если их не указать, то создастся окно с заголовком «Новое окно» , без содержимого и кнопок:
Пример создания модального окна с заголовком «Какой-то текст» и содержимым <p>Мой контент</p> :
В качестве содержимого можно передавать HTML-код.
Добавление кнопок в футер окна осуществляется с помощью ключа footerButtons . Он принимает в качестве значения массив объектов. Каждый объект в этом массиве представляет собой кнопку . Она в свою очередь задаётся посредством ключей text , class и action . С помощью них вы можете кнопке соответственно установить текст, класс и атрибут data-action :
Методы
Управление созданным модальным окном осуществляется посредством методов:
- show – открытие;
- hide – закрытие;
- dispose – удаление из DOM HTML-элементов модального окна и обработчика события click ;
- setBody – установка основного содержимого;
- setTitle – изменение заголовка.
Открытие модального окна:
Скрытие модального окна:
Изменение заголовка и тела модального окна:
Уничтожение модального окна:
Данную операцию имеет смысл использовать только в том случае, если созданное окно вам больше не нужно на странице.
События
Если вам нужно выполнить какие-то действия при открытии и закрытии модального окна, то можете воспользоваться событиями:
Примеры
1. Открытие модального окна при нажатии на кнопку:
2. Открытие одного и того же модального окна при нажатии на разные кнопки (определяется через data-атрибут data-toggle=»modal» ):
3. Заголовок и содержимое модального окна устанавливается из значений data-атрибутов кнопки, посредством которой оно вызывается:
4. Обработка события click для кнопок, расположенной в футере модального окна:
5. Создание 2 разных модальных окон. Первое модальное окно открывается при нажатии на кнопки с data-атрибутом data-toggle=»modal-1″ , а второе – при клике на data-toggle=»modal-2″ :
6. Загрузка данных в модальное окно посредством AJAX:
7. Работа с событиями, возникающими при открытии и закрытии модального окна:
Внутреннее устройство модального окна
Код JavaScript модального окна представлен посредством класса ItcModal :
В конструкторе мы создаём DOM-элемент и формируем его HTML-структуру. Ссылку на созданный элемент мы помещаем в приватное свойство #elem . Данное свойство мы будем использовать в других методах ItcModal . Для вставки на страницу модального окна используется метод append .
Приватное свойство #disposed применяется для хранения состояния. По умолчанию оно имеет значение false . Это свойство связано с методом dispose() . При вызове этого метода, модальное окно удаляется со страницы. Но, кроме этого, также удаляется событие, связанное с ним. Для отметки этого действия, свойству #dispose присваивается значение true :
После этого действия мы не сможем открыть модальное окно, так как его уже нет. Чтобы это не приводило к ошибкам в коде, в метод show добавлена следующая проверка:
При открытии и закрытии модального окна, код генерирует события show.itc.modal и hide.itc.modal с помощью метода dispatchEvent . Сами события находятся в приватных свойствах #eventShowModal и #eventHideModal . Эти события вызываются для this.#elem . Используя их, вы можете очень просто добавить нужную логику при открытии и закрытии модального окна:
Приватный метод #handlerCloseModal является обработчиком события click и используется для закрытия модального окна. То есть он выполняется при нажатии на крестик или при клике на backdrop . Это действие мы вынесли в отдельный метод для того, чтобы потом мы могли удалить его при вызове метода dispose .