Как сделать всплывающее окно с рекламой

  • Закрыть ... [X]

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

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

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

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

    • Открывающиеся на переднем плане (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. В их состав может входить целый набор окон. Дизайн и функционал каждого из них «заточен» под выполнение определенной задачи (регистрация, отправка сообщения и другое).

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

    <html> <head> <title>Как сделать всплывающее окно на Jquery</title> <link href="style.css" rel="stylesheet" type="text/css"> <meta charset="UTF-8"> <meta http-equiv="content-language" content="ru"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ PopUpHide(); }); function PopUpShow(){ $("#window-popup").show(); } function PopUpHide(){ $("#window-popup").hide(); } </script> <style type="text/css">.box { width: 400px; height: 300px; background-color: #ccc; margin:0px auto; padding:10px; font-size:40px; color: #fff; }.popup { width:100%; min-height:100%; background-color: rgba(0,0,0,0.5); overflow:hidden; position:fixed; top:0px; }.popup.popup-content { margin:40px auto 0px auto; width:200px; height: 80px; padding:10px; background-color: #c5c5c5; border-radius:5px; box-shadow: 0px 0px 10px #000; } </style> </head> <body> <div> <div class="box"> Пример всплывающего окна<br> <a href="javascript:PopUpShow()">Показать попап</a> </div> <div class="popup" id="window-popup"> <div class="popup-content"> Поздравляю вы сделали всплывающее окно!!! <a href="javascript:PopUpHide()">Скрыть попап</a> </div> </div> </div> </body> </html>

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

    На практике применяется разделение кода. То есть html, css и программный скрипт находятся в разных файлах. Это реализует возможность использования кода не для одной страницы сайта, а для многих.

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

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

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

    Популярное


    Поделись с друзьями



    Рекомендуем посмотреть ещё:



    Видео инструкция как избавиться от рекламы в всплывающих окнах Как самому сделать теплицу из профиля под поликарбонат

    Как сделать всплывающее окно с рекламой Как сделать всплывающее окно с рекламой Как сделать всплывающее окно с рекламой Как сделать всплывающее окно с рекламой Как сделать всплывающее окно с рекламой Как сделать всплывающее окно с рекламой Как сделать всплывающее окно с рекламой Как сделать всплывающее окно с рекламой

    ШОКИРУЮЩИЕ НОВОСТИ