Как сделать несколько всплывающих окон
Добавил пользователь Дмитрий К. Обновлено: 21.08.2024
А такая ли гадина эти ваши всплывающие окна?
Несмотря на такую дурную славу, всплывающие окна могут не только раздражать, но и приносить пользу. Изначально они являются лишь разновидностью диалоговых окон, применяемых в программировании как элементы пользовательского интерфейса.
Они служат для информирования и как средство диалога между пользователем и программой ( веб-приложением ). Но, к сожалению, такое негативное отношение многих пользователей к всплывающим окнам во многом оправдано, потому что в сети они применяются в основном для рекламных целей.
Есть два вида рекламных окон:
- Открывающиеся на переднем плане ( pop-up ) – всплывают поверх основного;
- Открывающиеся на заднем плане ( pop-under ) – открываются за основным окном.
Последние являются самыми коварными. Они становятся активными и видными для пользователя лишь после закрытия основного. Поэтому определить их источник и вовремя блокировать не удастся.
Средства борьбы
Из-за повсеместного применения всплывающих окон для нежелательной рекламы в интернете многие разработчики программного обеспечения начали встраивать в свои продукты средства борьбы с ними.
Основной программой для пользования интернетом являются браузер. Поэтому основной способ блокировки действия рекламных окон реализован именно в браузере:
- Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
- Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
- Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera . В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.
В современных браузерах система блокировки всплывающих окон настраивается через пользовательский интерфейс. В Хроме , как и в большинстве других браузеров, реализованы возможность включения или отключения блокировки, а также составления списка исключений ( доверенных сайтов ):
Создание всплывающих окон с помощью javascript
В веб-программировании для создания всплывающих окон используется несколько технологий. Основным средством их создания пока остается 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 . Подключив один из них, вы получите готовое окно.
Также существует несколько популярных скриптов. Пример одного из них будет приведен ниже. По такому принципу работают всплывающие окна в контакте и других популярных социальных сетях:
На практике применяется разделение кода. То есть html , css и программный скрипт находятся в разных файлах. Это реализует возможность использования кода не для одной страницы сайта, а для многих.
Кроме рассмотренных вариантов всплывающие окна можно реализовать с помощью Delphi . Но это решение на просторах всемирной паутины встречается крайне редко.
Какой вариант лучше?
Модальное окно html + css, несколько вариантов модальных окон, открытие, закрытие модального окна, открытие модального окна по ссылке, открытие модального окна по кнопке! В общем попытаемся разобраться в скрипте модального окна!
Самое простое модальное окно
Что такое "Модальное окно"
Определение, что такое "Модальное окно"!? "Модальное окно" - это всплывающий элемент, который покрывает все пространство монитора и делает невозможным другие действия на сайте до того, пока вы не закроете это окно!
Алгоритм создания модального окна:
На самом деле, если разобраться, то нам всего то понадобится несколько кнопок и пара div, чтобы это все работало!
Удивительно, что когда сталкиваешься с темой модального окна, то такое ощущение, что люди просто хотят, чтобы вы сошли с ума от того количества кода, которое они используют для вывода и закрытия модального окна!!
Я не претендую на истину в последней инстанции, и вы всегда с помощью поиска всегда сможете найти огромное количество вариантов модальных окон! Но наш принцип максимально просто и минимум кода во всех скриптах - и модальные окна здесь не исключения!
Самое простое модельное окно html + css
Чтобы забрендировать данный скрипт, поскольку я его написал самолично, то он будет называться ->"DW modal window"
Что потребуется для создания модального окна!?
Основной блок модального окна, который по умолчанию будет скрыт (display: none;), как вы наверное уже догадались вниже идущем коде четыре элемента
1). затемнение(zatemnenie),
2). само окно(window)
3). закрытие окна(close_window)
4). Содержание модального окна
И далее нам потребуются стили для нашего модального окна, не буду расписывать каждую строчку -> соберем весь код модального окна вместе:
Скрипт модального окна в сборе -> html + css
Мы недавно ввели новые фишки такие как. : для данного пункта у нас, кроме кода. который расположен ниже
Пример модального окна на отдельной странице
Теперь в этом пункте нашего повествования о модальных окнах соберем наш код модального окна все вместе.
Здесь текст, видео, ссылки, все, что вы захотите!
Живой пример вывода модального окна на экран
После того, как мы сделали все приготовления для реализации модального окна нам нужен живой пример, как же работает данный скрипт модального окна!
Для того, чтобы продемонстрировать вывод модального окна,Ю вам придется нажать по ссылке:
Пример модального окна на отдельной странице
Вызов модального окна по нажатию на кнопку
Это реализуется очень просто:
Результат открытие модального окна по нажатию кнопки
Как сделать вызов нескольких модальных окон на странице!?
Данный скрипт модального окна имеет один недостаток - он будет работать лишь с одним модальным окном!
Если вдруг, вам требуется выводить несколько модальных, разных окон, то вам предстоит модернизировать данный скрипт!
Для этого возьмем эти же стили приведенные выше.
Первый стиль с ид zatemnenie с target полностью удаляем он нам не потребуется
Второй стиль меняем на класс .zatemnenie , его присваиваем нашему второму блоку, который будет скрыт:
В кнопку добавляем ]класс] и id сделаем три кнопки, обращаю ваше внимание, что id должен быть уникальным.
Далее нам потребуется js скрипт, который обработает нажатие на первую кнопку и закрытие при нажатии на кнопку закрыть, соберем все вместе:
Используйте примеры ниже, чтобы создавать всплывающие окна в своих блоках и шаблонах.
Чтобы проверить примеры, создайте простой HTML блок с поддержкой SMARTY любой части сайта.
1. Открываем блок во всплывающем окне по клику¶
Ссылка, которая откроет pop-up блок должна иметь классы:
- cm-dialog-opener
- cm-dialog-auto-size — размер окна будет соответствовать содержимому.
ID блока который необходимо открыть задаётся параметром data-ca-target-id .
ID блока должен быть уникальным.
Результат клика по ссылке:
2. Любую страницу в pop-up окне (по Ajax)¶
Можно открыть любую страницу или шаблон контроллера в pop-up окне.
Также, как в примере выше, только дополнительно указывается href c URL необходимой страницы.
Пример SMARTY блока:
Результат клика по ссылке:
3. Используем готовый SMARTY шаблон (common/popupbox.tpl)¶
В CS-Cart есть заготовка для открытия всплывающих окон, она расположена в папке темы: ` /design/themes/[название_темы]/templates/common/popupbox.tpl
Данная заготовка позволяет быстро создавать Pop-up окна. Её используют другие шаблоны темы и дополнительные модули.
Пример SMARTY блока:
Результат клика по ссылке:
4. Всплывающее окно с формой¶
Сделаем форму, которая будет открываться по клику на ссылку. Форма будет отправлять данные на ваш контроллер используя Ajax.
Пример SMARTY блока:
Результат клика по ссылке:
5. Открыть всплывающее окно при загрузке страницы¶
Добавьте блоку класс cm-dialog-auto-open , тогда pop-up откроется при открытии страницы.
Чтобы окно не открывалось каждый раз, добавляйте данный класс при особых условиях, например, в зависимости от параметра в URL (или от сессии посетителя).
Пример SMARTY блока, окно будет открыто если в URL есть параметр ?open_love=Y :
Результат клика по ссылке:
6. Как сделать уникальные ID для всплывающих окон¶
Ссылки открывают всплывающие окна по ID , соответственно у каждого окна должен быть уникальный ID . Если будет несколько блоков с одинаковым ID, то это приведёт к одновременному открытию двух и более окон.
Если вы добавляете всплывающее окно через блок, то можно использовать массив , который содержит информацию о блоке, в том числе .
А такая ли гадина эти ваши всплывающие окна?
Несмотря на такую дурную славу, всплывающие окна могут не только раздражать, но и приносить пользу. Изначально они являются лишь разновидностью диалоговых окон, применяемых в программировании как элементы пользовательского интерфейса.
Они служат для информирования и как средство диалога между пользователем и программой ( веб-приложением ). Но, к сожалению, такое негативное отношение многих пользователей к всплывающим окнам во многом оправдано, потому что в сети они применяются в основном для рекламных целей.
Есть два вида рекламных окон:
- Открывающиеся на переднем плане ( pop-up ) – всплывают поверх основного;
- Открывающиеся на заднем плане ( pop-under ) – открываются за основным окном.
Последние являются самыми коварными. Они становятся активными и видными для пользователя лишь после закрытия основного. Поэтому определить их источник и вовремя блокировать не удастся.
Средства борьбы
Из-за повсеместного применения всплывающих окон для нежелательной рекламы в интернете многие разработчики программного обеспечения начали встраивать в свои продукты средства борьбы с ними.
Основной программой для пользования интернетом являются браузер. Поэтому основной способ блокировки действия рекламных окон реализован именно в браузере:
- Internet Explorer – стал последним из всех программных продуктов, в котором была реализована возможность блокировки всплывающей рекламы. Это было сделано лишь в 2004 году;
- Opera – этот продукт стал первым браузером в мире со встроенной функцией блокировки всплывающих окон. Всплывающие окна в Опере можно блокировать, начиная с 2000 года;
- Mozilla Firefox – этот браузер усовершенствовал подход к борьбе с рекламой, который был реализован в Opera . В отличие от него в Мозиле блокируются не вся всплывающая реклама, а лишь та, которая загружается при открытии основного окна.
В современных браузерах система блокировки всплывающих окон настраивается через пользовательский интерфейс. В Хроме , как и в большинстве других браузеров, реализованы возможность включения или отключения блокировки, а также составления списка исключений ( доверенных сайтов ):
Создание всплывающих окон с помощью javascript
В веб-программировании для создания всплывающих окон используется несколько технологий. Основным средством их создания пока остается 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 . Подключив один из них, вы получите готовое окно.
Также существует несколько популярных скриптов. Пример одного из них будет приведен ниже. По такому принципу работают всплывающие окна в контакте и других популярных социальных сетях:
На практике применяется разделение кода. То есть html , css и программный скрипт находятся в разных файлах. Это реализует возможность использования кода не для одной страницы сайта, а для многих.
Кроме рассмотренных вариантов всплывающие окна можно реализовать с помощью Delphi . Но это решение на просторах всемирной паутины встречается крайне редко.
Какой вариант лучше?
Читайте также: