Что такое всплывающее окно и как его создать самостоятельно
У многих пользователей интернета термин « вплывающее окно » вызывает негативные ассоциации. Перед глазами сразу же « вплывает » картинка того, как при попытке просмотреть на сайте нужную информацию эта гадина закрывает нужный кусок текста. Что еще хуже, если пытаться закрыть его, пользователя зачастую вообще перекидывает на другой ресурс.
А такая ли гадина эти ваши всплывающие окна?
Несмотря на такую дурную славу, всплывающие окна могут не только раздражать, но и приносить пользу. Изначально они являются лишь разновидностью диалоговых окон, применяемых в программировании как элементы пользовательского интерфейса.
Они служат для информирования и как средство диалога между пользователем и программой ( веб-приложением ). Но, к сожалению, такое негативное отношение многих пользователей к всплывающим окнам во многом оправдано, потому что в сети они применяются в основном для рекламных целей.
Есть два вида рекламных окон:
- Открывающиеся на переднем плане ( pop-up ) – всплывают поверх основного;
- Открывающиеся на заднем плане ( pop-under ) – открываются за основным окном.
Последние являются самыми коварными. Они становятся активными и видными для пользователя лишь после закрытия основного. Поэтому определить их источник и вовремя блокировать не удастся.
Средства борьбы
Из-за повсеместного применения всплывающих окон для нежелательной рекламы в интернете многие разработчики программного обеспечения начали встраивать в свои продукты средства борьбы с ними.
Основной программой для пользования интернетом являются браузер. Поэтому основной способ блокировки действия рекламных окон реализован именно в браузере:
- Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
- Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
- Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera . В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.
В современных браузерах система блокировки всплывающих окон настраивается через пользовательский интерфейс. В Хроме , как и в большинстве других браузеров, реализованы возможность включения или отключения блокировки, а также составления списка исключений ( доверенных сайтов ):
Создание всплывающих окон с помощью javascript
В веб-программировании для создания всплывающих окон используется несколько технологий. Основным средством их создания пока остается javascript . В его функционале имеется несколько видов диалогов, действие которых похоже на действие всплывающих окон:
- Метод alert() – выводит на экран обычное текстовое сообщение. Чтобы скрыть диалог после прочтения, нужно нажать на кнопку « Ok » внизу окна;
- Метод confirm() – подобен предыдущему методу. Но выводимый им диалог кроме « Ok » снабжен еще и кнопкой « Cancel ». С их помощью пользователь может принять или отказаться от условия, указанного в окне;
- Метод prompt() – служит для вызова еще одной разновидности всплывающего окна javascript . В отличие от упомянутых выше это окно снабжено еще и текстовым полем. В него пользователь может вводить текстовые данные, которые можно присвоить значению нужной переменной.
Действие всех трех методов и вызываемые ими разновидности диалога показаны на изображении:
Но это всего лишь разновидности диалогов. Для создания настоящего всплывающего окна в javascript используется метод open() объекта window .
Вот полный синтаксис метода:
win = window. open (url, name, params) , где:
- url – это адрес страницы, которая откроется в новом окне;
- Name – имя созданного окна. Может быть использовано для дальнейшей обработки в формах (параметр target );
- Params – строка параметров для нового окна. Их полный список можно узнать самостоятельно из документации по javascript.
На изображении ниже показано действие метода и приведен упрощенный скрипт всплывающего окна:
Создается функция f1 , в теле которой реализован вызов метода window. open() . Затем идет вызов этого метода с одним параметром, указывающим адрес страницы, которая откроется в созданном окне. После этого вызывается метод setTimeout() . В качестве параметров ему передается функция f1 и интервал времени, через который откроется новое окно.
Создание всплывающего окна с помощью CSS
Также можно создать всплывающее окно в CSS . Эта возможность была реализована лишь с выходом третьей версии этой технологии. Злоупотреблять этим вариантом не стоит, потому что он будет работать лишь в самых новых версиях браузеров:
Как видно из рисунка, такое модальное окно создано с помощью CSS и html . В отличие от созданных с помощью js это всплывающее окно не удастся передвигать по странице. К тому же его код слишком громоздок, чтобы описывать его в масштабах этой статьи. Но зато такое окно не будет блокироваться браузером.
Обзор остальных технологий
Совсем не обязательно разрабатывать всплывающее окно самостоятельно. Сейчас для этого создано много бесплатных плагинов на jquery . Подключив один из них, вы получите готовое окно.
Также существует множество плагинов для популярных CMS . В их состав может входить целый набор окон. Дизайн и функционал каждого из них «заточен» под выполнение определенной задачи ( регистрация, отправка сообщения и другое ).
Также существует несколько популярных скриптов. Пример одного из них будет приведен ниже. По такому принципу работают всплывающие окна в контакте и других популярных социальных сетях:
Код приведен в варианте « для ленивых ». Вставив его в любой редактор и запустив на выполнение, вы получите готовый пример всплывающего окна на основе jquery :
На практике применяется разделение кода. То есть html , css и программный скрипт находятся в разных файлах. Это реализует возможность использования кода не для одной страницы сайта, а для многих.
Кроме рассмотренных вариантов всплывающие окна можно реализовать с помощью Delphi . Но это решение на просторах всемирной паутины встречается крайне редко.
Какой вариант лучше?
Для рекламных « трюков » больше подходит вариант, реализованный с помощью CSS 3 . Созданное таким образом окно не будет блокироваться браузерами. А для остальных задач вполне подойдет старый надежный javascript или новомодный jquery .
Как создавать диалоговые окна в Windows?
Как создавать диалоговые окна с помощью VBScript? Всем привет, в этом уроке я вам покажу, как быстро создавать диалоговые окна в Windows, с помощью которых мы так часто подшучиваем над своими коллегами. Я представлю небольшой обзор команд с пояснениями для того, чтобы вы не просто копировали диалоговые окна с сайта, а смогли сами импровизировать, одновременно обучаясь. Это будет знакомый вам по предыдущим компьютерным приколам скриптовый язык VBScript, и всё, что нам как всегда понадобится, это простой Блокнот, который мы, после заполнения кода, будем сохранять в укромном месте с расширением .vbs.
VBScript – это простой язык программирования, исполняемый в системе сценарием Windows Script Host. Легко кодируется в Блокноте, а лучше в специальных текстовых редакторах с расширенными возможностями, как например, AkelPad или Notepad ++ (они понимают русскую кодировку). Именно эта связка сценария и скрипта используется Windows для того, чтобы создавать диалоговые окна . Это гораздо проще, чем использовать такие языки как С и С ++. Однако подробное знакомство с VBScript задачей настоящей статьи не ставилось; здесь я лишь приведу ряд конкретных примеров того как создавать диалоговые окна с более-менее осмысленным для читающего содержанием и вариантами развития событий по результатам действий.
Как создавать диалоговые окна с ошибкой?
Итак, создадим простое диалоговое окно с двумя кнопками. И создадим окно с псевдоошибкой. Откроем текстовый редактор, и создадим сообщение, в котором:
Кавычки и скобки обязательны. Значок “+” позволяет использовать в одном скрипте множественные функции окна. В поле «содержание ошибки» вы можете написать любое сообщение, которое впоследствии прочитает пользователь. А в поле «автор ошибки» напишите того, кто это сообщение якобы пришлёт. Ими могут быть сама система Windows, или сосед по офису. А может быть директор или администратор. Решать опять же вам. Останавливаться не буду, идём дальше. Вот каким будут выглядеть диалоговые окна после того, как вы сохраните документ в формате .vbs.
Поле «5+16» приказывает системе создавать диалоговые окна с ярлыком критической ошибки и двумя кнопками. Это, как видно, кнопки «повтор» и «отмена». Но как вы уже поняли, можно создавать диалоговые окна и с другими настройкам, и всё это благодаря комбинации цифр или чисел. Это – числовые выражения постоянных, отвечающие за выводимые кнопки, значки и режимы окна. Подробнее смотрим ниже:
Нажатие кнопок для указанного кода, и, конечно, числовых комбинаций ни к чему не приведёт, но вы в силах будете указать системе, сколько раз те или иные сообщения будут появляться. Для этого просмотрите статью Множественные сообщения об ошибке. Если понадобится перенести строки в диалоговых окнах, можно воспользоваться написанием скрипта в формате:
Диалоговые окна VBS: множество постоянных и переменных.
В простейшем написании скрипта именно знак “+” позволит применять сразу несколько параметров в одном скрипте. Например, для написания окна типа:
Просто повторите скрипт так:
Кстати, появление окна можно запустить по кругу, указав в скрипте команду на запуск его же по нажатию на любую из кнопок:
где скрипт.vbs и есть тот самый скрипт, лежащий, скажем, на Рабочем столе (C:\Users\1\Desktop\). При этом избавиться от окна можно будет только через Диспетчер задач. Скрипт может также содержать и какую-то другую одну или несколько команд. Например, пара вводимых переменных не просто создаст интерактивный диалог, но запустит программу. Например, браузер. Ну, или не запустит:
Всплывающие окна. Настраиваем правильно
Всплывающие окна, они же модальные окна на сайте — зло. Так прямым текстом и говорит автор первого в мире поп-ап скрипта Итан Цукерберг и сожалеет о содеянном. Итан хотел показывать посетителям сайтов информацию с учетом предпочтений. В погоне за данными пользователей создатели сайтов эпохи дикого интернета дискредитировали благую идею, а нам с этим жить. В этой статье предложим готовые варианты и дадим советы как настроить всплывающие окна так, чтобы клиент влюбился в ваш сайт.
Мир против плохой рекламы и это нельзя игнорировать
В 2017 году исследование отношения людей к рекламе поставило точку в этом вопросе — не показывайте пользователям всплывающие окна, если хотите их сохранить. Из 23 видов рекламы 452 участника теста однозначно отдали антипремию всплывающим окнам. А в 2018 Chrome и Yandex взялись улучшать пользовательский экспириенс, сворачивая назойливую рекламу. В Chrome под нож пошли 12 видов рекламы, включая назойливые всплывающие окна. Даже одно неправильно всплывающее окно позволит гуглу полностью заблокировать рекламный контент на сайте. Хуже этого только хейт-мейл пользователей .
Как не попасть под санкции гугла
Чтобы встроенный в гугл блокировщик не забанил рекламу, сделайте ее беззвучной, спокойной и легко закрывающейся. Google Chrome использует большинство пользователей в России — имеет смысл проверить сайт на соответствие рекламной политике гугла.
Всплывающие окна правильно
Попробуйте следовать кантовскому императиву. Мы гуляем по парку в новом городе, ищем классный вид на площадь. И тут вылетает зазывала в кислотной рубахе, угрожает покатать на катере. Сует буклеты, просит данные в анкету да еще и не уходит. Вряд ли мы бы сели в лодку этого человека — мы даже не видим воду поблизости. Так и в интернете: все должно быть уместным . Особенно противоречивое всплывающее окно.
- Показывайте окно вовремя. В аналогии выше, было бы логичнее увидеть «всплывающего» пусть даже и кислотного зазывалу у воды. Дайте человеку на сайте время. Люди не любят, когда их отвлекают чтения или просмотра почем зря.
Узнайте среднее время посещения сайта в веб-аналитике. Пусть окна всплывают немного до выхода пользователя с сайта или страницы и как минимум после полной загрузки страницы.
- Позаботьтесь об однородном дизайне. В парке, где по условию гуляет наш клиент, лучше обойтись без вызывающе ярких дизайнов и клоунских цветов. Тогда и гулять приятнее, и поплавать хочется. Кислотные футболки пусть лежат на барахолке.
Органично вписывающееся в дизайн-код сайта всплывающее окно убедит посетителя в отсутствии подводных камней. Пользователь дочитал статью-предложите скачать тематический сборник в приятном глазу лайтбоксе. Гугл любит лайтбоксы.
Лучше один раз увидеть, чем сто раз увидеть — не повторяйте всплывающие окна для одного и того же посетителя. Анализируйте аудиторию, делайте окна релевантными каждому конкретному пользователю или попрощайтесь с ним навсегда. Давно пользующийся вашим продуктом клиент не должен получать окно с предложением демо версии.
Сделайте окно удобным. Любой элемент сайта должен быть удобным в использовании. Позаботьтесь об удобных всплывающих окнах и емко расположите на них:
- Понятный и вовлекающий текст обращения;
- Место для ввода данных или нажатия. Поэкспериментируйте с кнопкой, сделайте ее тематической. «Жду звонка» вместо «Отправить»;
- Призыв к действию. Главное не перестараться;
- Крестик, дающий возможность закрыть окно. Всегда должен быть легко различим, чтобы не подумали неладное;
- Социальное доказательство. К примеру, счетчик подписавшихся на рассылку.
Если предложение не получается емко уместить, разбейте его на две части, на два всплывающих окна. В первом уточните намерение, во втором расположите поле для ввода данных. Не забывайте поощрять пользователя, дайте ему понять что вам не все равно. Хоть спасибо скажите за имейл. Даже зазывалы обходительны с туристами — главное не фамильярничать.
- Не держите людей за дураков. Говорите правду, чем проще текст обращения — тем лучше. Проверяйте поп-апы на себе с позиции пользователя. Тестируйте эффективность всплывающих окон, анализируйте и оперативно улучшайте качество пребывания посетителей на сайте.
- Используйте альтернативы. На фоне жесткой борьбы интернета с назойливой рекламой всплывающие окна страдают больше остальных. С ними можно экспериментировать и достигать хороших результатов , но если есть возможность обратиться к пользователю не раздражая его — воспользуйтесь сначала ей. Вот варианты: