Что такое всплывающее окно и как его создать самостоятельно

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

А такая ли гадина эти ваши всплывающие окна?

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

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

Есть два вида рекламных окон:

• Открывающиеся на переднем плане ( pop-up ) – всплывают поверх основного;
• Открывающиеся на заднем плане ( pop-under ) – открываются за основным окном.

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

Средства борьбы

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

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

• Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
• Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
• Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera . В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.

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

Создание всплывающих окон с помощью javascript

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

• Метод alert() – выводит на экран обычное текстовое сообщение. Чтобы скрыть диалог после прочтения, нужно нажать на кнопку « Ok » внизу окна;
• Метод confirm() – подобен предыдущему методу. Но выводимый им диалог кроме « Ok » снабжен еще и кнопкой « Cancel ». С их помощью пользователь может принять или отказаться от условия, указанного в окне;
• Метод prompt() – служит для вызова еще одной разновидности всплывающего окна javascript . В отличие от упомянутых выше это окно снабжено еще и текстовым полем. В него пользователь может вводить текстовые данные, которые можно присвоить значению нужной переменной.

Действие всех трех методов и вызываемые ими разновидности диалога показаны на изображении:

Вот полный синтаксис метода:

win = window. open (url, name, params) , где:

• url – это адрес страницы, которая откроется в новом окне;
• Name – имя созданного окна. Может быть использовано для дальнейшей обработки в формах (параметр target );
• Params – строка параметров для нового окна. Их полный список можно узнать самостоятельно из документации по javascript.

На изображении ниже показано действие метода и приведен упрощенный скрипт всплывающего окна:

Создание всплывающего окна с помощью CSS

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

Обзор остальных технологий

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

Также существует множество плагинов для популярных CMS . В их состав может входить целый набор окон. Дизайн и функционал каждого из них «заточен» под выполнение определенной задачи ( регистрация, отправка сообщения и другое ).

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

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

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

Какой вариант лучше?

Для рекламных « трюков » больше подходит вариант, реализованный с помощью CSS 3 . Созданное таким образом окно не будет блокироваться браузерами. А для остальных задач вполне подойдет старый надежный javascript или новомодный jquery .

Всплывающие элементы Flyouts

Всплывающий элемент — это контейнер с возможностью исчезновения, который отображает в качестве содержимого произвольный пользовательский интерфейс. A flyout is a light dismiss container that can show arbitrary UI as its content. Всплывающие элементы могут содержать другие вложенные всплывающие элементы или контекстные меню. Flyouts can contain other flyouts or context menus to create a nested experience.

Получение библиотеки пользовательского интерфейса Windows Get the Windows UI Library

Библиотека пользовательского интерфейса Windows 2.2 или более поздних версий содержит новый шаблон для этого элемента управления, который использует закругленные углы. Windows UI Library 2.2 or later includes a new template for this control that uses rounded corners. Дополнительные сведения см. в разделе о радиусе угла. For more info, see Corner radius. WinUI — это пакет NuGet, содержащий новые элементы управления и функции пользовательского интерфейса для приложений для Windows. WinUI is a NuGet package that contains new controls and UI features for Windows apps. Дополнительные сведения, включая инструкции по установке, см. в описании библиотеки пользовательского интерфейса Windows. For more info, including installation instructions, see Windows UI Library.

API платформы: класс Flyout Platform APIs: Flyout class

Выбор правильного элемента управления Is this the right control?

• Не используйте всплывающий элемент вместо подсказки или контекстного меню. Don’t use a flyout instead of tooltip or context menu. Используйте подсказку, чтобы вывести краткое описание, которое исчезает через определенное время. Use a tooltip to show a short description that hides after a specified time. Для контекстных действий, связанных с элементом пользовательского интерфейса, например копированием или вставкой, используйте контекстное меню. Use a context menu for contextual actions related to a UI element, such as copy and paste.

Рекомендации по целесообразности использования диалоговых окон и всплывающих элементов (аналогичных элементов управления) приведены в статье Диалоговые окна и всплывающие элементы. For recommendations on when to use a flyout vs. when to use a dialog (a similar control), see Dialogs and flyouts.

Примеры Examples

Если у вас установлено приложение XAML Controls Gallery, щелкните здесь, чтобы открыть его и увидеть ContentDialog или Flyout в действии. If you have the XAML Controls Gallery app installed, click here to open the app and see the ContentDialog or Flyout in action.

Как создать всплывающий элемент How to create a flyout

Всплывающие элементы связаны с определенными элементами управления. Flyouts are attached to specific controls. Вы можете использовать свойство Placement для указания места отображения всплывающего элемента: вверху, слева, внизу, справа или в центре. You can use the Placement property to specify where a flyout appears: Top, Left, Bottom, Right, or Full. Если выбрать полный режим размещения, приложение растягивает всплывающий элемент или размещает его в центре окна приложения. If you select the Full placement mode, the app stretches the flyout and centers it inside the app window. Некоторые элементы управления, например Button, содержат свойство Flyout, которое можно использовать для привязки всплывающего элемента или контекстного меню. Some controls, such as Button, provide a Flyout property that you can use to associate a flyout or context menu.

В этом примере создается простой всплывающий элемент, в котором отображается текст при нажатии кнопки. This example creates a simple flyout that displays some text when the button is pressed.

Если элемент управления лишен свойства «Flyout», вы можете использовать присоединенное свойство FlyoutBase.AttachedFlyout. If the control doesn’t have a flyout property, you can use the FlyoutBase.AttachedFlyout attached property instead. При этом также следует вызвать метод FlyoutBase.ShowAttachedFlyout для отображения всплывающего элемента. When you do this, you also need to call the FlyoutBase.ShowAttachedFlyout method to show the flyout.

В этом примере к изображению добавляется простой всплывающий элемент. This example adds a simple flyout to an image. Когда пользователь нажимает на изображение, приложение отображает всплывающий элемент. When the user taps the image, the app shows the flyout.

В предыдущих примерах всплывающие элементы определялись внутренне. The previous examples defined their flyouts inline. Вы также можете определить всплывающий элемент как статический ресурс и использовать его с несколькими элементами. You can also define a flyout as a static resource and then use it with multiple elements. В этом примере показано создание более сложного всплывающего элемента, в котором отображается увеличенный вариант изображения при нажатии его эскиза. This example creates a more complicated flyout that displays a larger version of an image when its thumbnail is tapped.

Стилизация всплывающего элемента Style a flyout

Для стилизации всплывающего элемента изменяется его свойство FlyoutPresenterStyle. To style a Flyout, modify its FlyoutPresenterStyle. В этом примере показан абзац создания программы-оболочки текста и делает блок текста доступным для программ чтения с экрана. This example shows a paragraph of wrapping text and makes the text block accessible to a screen reader.

Изменение стиля всплывающих элементов для более наглядного отображения Styling flyouts for 10-foot experiences

Элементы управления с исчезновением, например всплывающие элементы, захватывают фокус клавиатуры или геймпада внутри промежуточного пользовательского интерфейса, пока не будут закрыты. Light dismiss controls like flyout trap keyboard and gamepad focus inside their transient UI until dismissed. Для предоставления визуальной подсказки по этому поведению элементы управления с исчезновением на приставке Xbox отображают наложение, затемняющее контрастность и видимость вне области действия пользовательского интерфейса. To provide a visual cue for this behavior, light dismiss controls on Xbox draw an overlay that dims the contrast and visibility of out of scope UI. Это поведение можно изменить с помощью свойства LightDismissOverlayMode . This behavior can be modified with the LightDismissOverlayMode property. По умолчанию всплывающие элементы пользовательского интерфейса отображают наложение с исчезновением на приставке Xbox, но не на других семействах устройств, хотя приложения могут принудительно устанавливать наложению постоянное значение Вкл. или Выкл. . By default, flyouts will draw the light dismiss overlay on Xbox but not other device families, but apps can choose to force the overlay to be always On or always Off.

Поведение с исчезновением Light dismiss behavior

Всплывающие элементы можно закрыть с помощью таких действий исчезновения: Flyouts can be closed with a quick light dismiss action, including

• Коснитесь области за пределами всплывающего элемента. Tap outside the flyout
• Нажмите клавишу Escape на клавиатуре. Press the Escape keyboard key
• Нажмите аппаратную или программную системную кнопку «Назад». Press the hardware or software system Back button
• Нажмите кнопку геймпада «B». Press the gamepad B button

При закрытии касанием этот жест обычно не передается пользовательскому интерфейсу под элементом. When dismissing with a tap, this gesture is typically absorbed and not passed on to the UI underneath. Например, если за открытым всплывающим элементом отображается кнопка, первое касание приведет к закрытию всплывающего элемента, но кнопка при этом не будет активирована. For example, if there’s a button visible behind an open flyout, the user’s first tap dismisses the flyout but does not activate this button. Для нажатия кнопки нужно второе касание. Pressing the button requires a second tap.

Вы можете изменить это поведение, назначив кнопку в качестве прозрачного элемента ввода для всплывающего элемента. You can change this behavior by designating the button as an input pass-through element for the flyout. Всплывающий элемент закроется при выполнении действий исчезновения, описанных выше, и передаст событие касания назначенному элементу OverlayInputPassThroughElement . The flyout will close as a result of the light dismiss actions described above and will also pass the tap event to its designated OverlayInputPassThroughElement . Такое поведение рекомендуется использовать для ускорения взаимодействия пользователей с функционально схожими элементами. Consider adopting this behavior to speed up user interactions on functionally similar items. Если ваше приложение имеет коллекцию избранного и каждый элемент в коллекции содержит присоединенный всплывающий элемент, логично предположить, что пользователям может потребоваться последовательно взаимодействовать с несколькими всплывающими элементами. If your app has a favorites collection and each item in the collection includes an attached flyout, it’s reasonable to expect that users may want to interact with multiple flyouts in rapid succession.

[!NOTE] Старайтесь не назначать прозрачный элемент ввода наложения, так как это приведет к деструктивным действиям. Be careful not to designate an overlay input pass-through element which results in a destructive action. Пользователи привыкают к действиям незаметного исчезновения, которые активируют основной пользовательский интерфейс. Users have become habituated to discreet light dismiss actions which do not activate primary UI. Кнопки «Закрыть», «Удалить» или другие кнопки деструктивных действий не должны активироваться при исчезновении, так как это может стать причиной непредвиденного и ошибочного поведения. Close, Delete or similarly destructive buttons should not activate on light dismiss to avoid unexpected and disruptive behavior.

В следующем примере будут активированы все три кнопки внутри FavoritesBar при первом касании. In the following example, all three buttons inside FavoritesBar will be activated on the first tap.

Вам также может понравиться

Windows или Linux: Что лучше выбрать?

Есть много причин выбирать между Windows и Linux, но

Файл владелец изменить linux

Команда Chown в Linux Chown Command in Linux (File

Установка шлюза по умолчанию linux

Настройка сети вручную Содержание Краткое описание

Чем разбить диск для linux

ИТ База знаний Курс по Asterisk Полезно — Узнать IP —