Урок 38 Всплывающее окно что это, как сделать на сайте всплывающее окно Jquery

03.09.201611601

Добрый день уважаемые читатели сайта Prosmo3.ru Вы наверное думали, что я уже забросил свой эксперимент, но это совсем не так. Просто по различным форс мажорным обстоятельствам, я не мог продолжить написание статей и эксперимент.
всплывающее окно


Пропустил я около 5 месяцев и поэтому считаю, что нет смысла брать это время, для просмотра итогового результата. Итак, если окунуться немного в прошлое, мы получим время равное 2 месяцам постоянной работы. Именно это время было затрачено с начала ведения блога. Итак продолжим. Сегодня поговорим о всплывающих окнах. Что такое всплывающее окно, спросите вы?

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

Так же всплывающие окна, при входе на сайт, могут быть двух типов. Всплывающее окно pop-up, которое является активным в момент захода посетителя на сайт. Я думаю такое окно видел каждый, так как оно сразу мешает большинству пользователей в глаза и не все сразу видят, как его возможно закрыть.

Второй вариант всплывающего окна pop-under . Этот способ открывает всплывающее окно в фоновом режиме и соответственно, его видно только после закрытия активного окна. Многие начинающие вебмастера, хотят сделать у себя на сайте всплывающее окно, хотя бы для привлечения большего количества подписчиков.

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

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

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

Jquery это библиотека хранящая Java скрипты, она помогает взаимодействовать нам с html, css. Улучшать визуальную составляющуюю сайта. Ну а также создавать всплывающее окно jquery.

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

Всплывающее окно Jquery

Если вы новичок в работе с библиотекой Jquery и не знаете как установить ее на свой сайт, то попробую вам описать эту процедуру вкратце. Итак для начала вам необходимо скачать саму библиотеку. Найти ее можно здесь.

Если ваш браузер не захотел скачивать файл, а просто открыл его как веб страницу с текстом, скопируйте путь и воспользуйтесь загрузчиками файлов. Например Ftp менеджером, вставив там скопированный путь. Теперь необходимо скачанный файл загрузить в корень вашего сайта. Далее вставляем код в файл Header.php

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.4.2.min.js"></script>

Обратите внимание, что src="" это адрес файла библиотеки jquery. Вставлять необходимо после этих строк

?><!DOCTYPE html>
<html <?php language_attributes(); ?> xmlns="http://www.w3.org/1999/xhtml"<?php

В зависимости от выбранной вами темы, возможны небольшие различия в вышеприведенном коде. Теперь нам необходимо создать два файла, один файл будет отвечать за стили, назовем его windowstyle.css.

А второй файл будет содержать html код всплывающего окна - window.html Эти файлы размещаем в одной директории с библиотекой Jquery. Там же создаем папку с картинками images, откуда будут браться картинки прописанные в файле стиля windowstyle.css . Скачиваем стили и картинки отсюда. Размещаем эти файлы и делаем наш html файл всплывающего окна

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

  <head>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <link rel="stylesheet"  type="text/css" href="windowstyle.css" />
  </head>

  <body>
  <h1>Контент страницы</h1>
  <div id="pop-up-window"><!--Окно-->
    <div id="windowHeader"><!--Верхняя часть окна-->
        <div id="windowTitle">Всплывающее окно jQuery</div><!--Название окна-->
            <img src="images/window_close.jpg" id="btnClose" /><!--Отображение кнопки закрыть-->
    </div>

    <div id="windowRightSide"><div id="windowLeftSide"></div></div><!--левая и правая часть окна-->
    <div id="windowContent"><p><img src="images/baner.png"/> <br/> <a href="http://feedburner.google.com/fb/a/mailverify?uri=LifeExample" target="popupwindow">Подписывайся на статьи блога!</a></p></div><!--Содержимое высплявающего окна jQuery-->
  </div>

  <div id="showWindow">Показать всплывающее окно</div>
  </body>

</html>

Давайте немного разберемся. У нас получилось всплывающее окно pop-up образца. Сначало мы создаем блок окна и описываем его детали. Каждая деталь, допустим WindowContent подгружает картинку из папки images. Если посмотреть сам код, то становится все достаточно понятно. Теперь в этот же файл мы добавляем сам код скрипта, который и будет выводить окно.

<script>
$(document).ready(function(){
    var pop_window = $('#pop-up-window');

        pop_window.hide();

    $('#showWindow').click(function(){
        pop_window.show(1000);
    });

    $('#btnClose').click(function(){
        pop_window.hide(1000);
    });

    });
</script>

Этого достаточно чтобы сделать простое всплывающее окно Jquery. Соответственно чтобы это окно запустилось например при нажатии ссылки, необходимо прописать адрес этого файла, а именно window.html

Если вы хотите разместить окно в определенном месте, сделать запуск окна по таймеру, добавить к всплывающему окну визуальные эффекты, необходимо будет отредактировать скрипт и дописать к нему новые функции.

Рекомендую самостоятельно изучить дополнительные функции jquery. Она вам пригодится.

Еще одним неплохим вариантом, если вы работаете с WordPress, станет использование плагина всплывающего окна. Об этом мы поговорим в следующем уроке.

Рекомендую посмотреть видео от Андрея Морковина, человек достаточно просто объясняет.

Часть 1

Часть 2

Часть 3

Часть 4