Только для читателей Lifeexample возможно открыть интернет-магазин на Moguta.CMS со скидкой в 15%

<<< Библиотека jQuery || Золотая техника: как сверстать сайт по макету >>>

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

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

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

Бороздя просторы глобальной паутины, я думаю, вы не раз сталкивались с подобными всплывающими окнами. Не смотря на то, что у пользователей приходящих на ваш сайт уже данным давно выработался инстинкт: "Вижу всплывающее окно – сразу закрываю!", нам все равно может пригодиться данный скрипт. А по этому, не медленно приступим к его разработке.

Подготавливаем окно к всплытию.

Прежде чем углубляться в процесс реализации скрипта, нам необходимо создать наше всплывающее окошко, пока без анимации. Для этого создайте два файла windowstyle.css и window.html, а также нам потребуется директория для хранения картинок images. Скачайте свежую библиотеку jQuery и поместите её в одной папке со скриптом. Если вы не знаете, как это сделать, читайте статью посвященную знакомству с библиотекой jQuery.

Файлы скрипта всплывающего окна

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

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

Набор картинок для всплывающего окна + windowstyle.css ( Скачали: 2280 чел. ) 

Перенесем картинки из содержимого архива в папку images, а также заменим наш windowstyle.css и продолжим подготовку. Для завершения церемонии приготовления, нам остается создать HTML код будущего всплывающего окна.

Вот таким должен получиться файл window.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!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-window, как не сложно догадаться из названия он будет играть роль всплывающего окна и содержать все его детали. Затем мы разделяем его на четыре части блоками: windowHeader, windowRightSide, windowLeftSide, windowTitle. Каждый, из которых содержит в себе одну из составляющих картинок окна из папки images. Кроме интерфейса, некоторые из данных блоков содержат в себе информацию, такую как заголовок окна, и кнопку для закрытия. Также мы создали блок windowContent – выводящий содержимое окна, в данном примере выводится логотип моего блога и ссылка для подписки на обновления статей. В реальности туда можно поместить все, что угодно.

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

Пишем скрипт "всплывающее окно jQuery"

На этом этапе мы имеем уже сформированное окно, которое в первую очередь нужно скрыть, а в последствии, при нажатии на блок showWindow оно должно плавно отобразиться.

Заготовок всплывающего окна

Следующий кусочек кода как это ни странно уже делает львиную долю функционала:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>

Если вы вставите его в windows.html, то уже на этом этапе можете проверить функциональность всплывающего блока pop-up-window. Не смотря на тривиальность кода, всё-таки стоит объяснить, алгоритм:

  1. После того как DOM сформировался, получаем содержимое блока pop-up-window и скрываем его.
  2. Если произошло нажатие на блок showWindow, запускаем событие show(1000) для блока pop-up-window, означающее выполнение действия показа с задержкой 1000 миллисекунд.
  3. При нажатии на кнопку закрытия окошка, отрабатывает противоположное событие window.hide(1000) скрывающее блок pop-up-window из вида.
Cкриншот срипта

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

  1. Выравнивание блока pop-up-window по центру браузера;
  2. Выпадение окна из-за границы браузера;
  3. Поочередное открытие и закрытие окна при нажатии на блок showWindow;
  4. Всплытие окна по таймеру;

Выравнивание блока по центру браузера

Чтобы выровнять DIV по центру браузера, без jQuery не обойтись, но это и не страшно, ведь с помощью этой замечательной библиотеки мы двумя строчками сможем выровнять наше всплывающее окно по центру. Все что нам требуется это прописать до вызова:

1
 pop_window.hide();

вот эти две строки:

1
2
pop_window.css('left', ($(window).width()-pop_window.width())/2+ 'px');
pop_window.css('top', ($(window).height()-pop_window.height())/2+ 'px');

Тут арифметика простая: вычисляем длину окна браузера, отнимаем от нее длину нашего блока pop-up-window, делим все это пополам, и получаем центровую координату ‘X’ для левого верхнего угла блока. Аналогичную операцию делаем в вертикальном направлении, и получаем координату ‘Y’.

Выпадение окна из-за границы браузера

Эффект заключается в том, что при нажатии на кнопку, наш блок как бы вываливается из-за пределов страницы, и фиксируется в центре экрана.

Следующий скрипт осуществляет задуманное:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<script>
    $(document).ready(function(){
        var pop_window = $('#pop-up-window');
       
        var X = ($(window).width()-pop_window.width())/2;
        var Y = ($(window).height()-pop_window.height())/2;
   
        pop_window.css('left', X+ 'px');
        pop_window.css('top', Y+ 'px');
         
        pop_window.hide();

        $('#showWindow').click(function(){
            pop_window.css('display', 'block');
            pop_window.css('top', -pop_window.height() + 'px');        
            pop_window.animate({top:Y});
        });

        $('#btnClose').click(function(){
            pop_window.hide(1000);
        });
   
       
    });
   
      </script>

Блоку присваиваются координаты за верхней границей браузера. Потом применяется jQuery событие — animate({top:Y}), которое плавно доводит наше всплывающее окно до координаты Y (середины страницы). Чтобы сделать движение более мягким можно использовать параметр "slow"

1
pop_window.animate({top:Y},"slow");

Поочередное появление и исчезновение окна при нажатии на блок showWindow

Попробуем сделать так, чтобы после того как окно уже показано на экране, при повторном нажатии на блок showWindow выполнялся процесс противоположный предыдущему. Т.е. окно должно плавно уходить за пределы страницы. Реализовать это нам может помочь событие slideToggle("slow"), достаточно заменить на него уже используемое нами событие show(1000) и все заработает.

Но ведь мы хотим попрактиковаться и создать эксклюзивный велосипед в виде всплывающего окна jQuery, поэтому мы изобретем такой скрипт:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
$(document).ready(function(){
    var pop_window = $('#pop-up-window');
       
    var X = ($(window).width()-pop_window.width())/2;
    var Y = ($(window).height()-pop_window.height())/2;

    pop_window.css('left', X+ 'px');
    pop_window.css('top', Y+ 'px');
         
    pop_window.hide();
    var visible_window=false;

    $('#showWindow').click(function(){
       
    if(!visible_window){
        pop_window.css('display', 'block');
        pop_window.css('top', -pop_window.height() + 'px');        
        pop_window.animate({top:Y},"slow");
        visible_window=true;
            }
    else{  
        pop_window.css('display', 'block');    
        pop_window.animate({top:-pop_window.height()},"slow");
        visible_window=false;
        }
    });
       

    $('#btnClose').click(function(){
        pop_window.hide(1000);
    });
   
       
});
   
</script>

Как видите мало чего изменилось, что говорит о том что пользоваться jQuery – одно удовольствие. Нет, не то что бы я расхваливаю эту библиотеку, но я явно в восторге от того, что мне не приходится самостоятельно создавать JavaScript функции и продумывать логику работы.

Всплытие окна по таймеру

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

Тут я не нашел ничего лучшего чем использование стандартной JavaScript функции для задания интервала на выполнения setTimeout():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
setTimeout(function(){
    if(!visible_window){
            pop_window.css('display', 'block');
            pop_window.css('top', -pop_window.height() + 'px');        
            pop_window.animate({top:Y},"slow");
            visible_window=true;
            }
        else{  
            pop_window.css('display', 'block');    
            pop_window.animate({top:-pop_window.height()},"slow");
            visible_window=false;
        }
    }
    , 2000);

Скачать завершенную версию скрипта созданного в данной статье я предлагаю вам по ссылке:

Скачать Всплывающее окно jQuery ( Скачали: 5064 чел. ) 

Ну вот мы и закончили, первый скрипт с использование jQuery библиотеки, надеюсь вы получили базовый опыт для дальнейшей работы. Если что-то осталось не понятным, не стесняйтесь спрашивайте, разберемся вместе.

Чтобы не пропустить публикацию следующей статьи подписывайтесь на рассылку по E-mail или RSS ленту блога.

Нравится

Комментарии

  • Alexey

    Марк, спасибо за статью, вспл. окна — важная тема, используется во всех проектах, где я участвовал, по крайней мере.
    Вопрос: Я правильно понял — что вот этот синтаксис — #pop-up-window — означает ссылку на див под названием pop-up-window?
    И еще вопрос — в начале статьи Вы написали, что нам потребуется index.html — что-то я его в скачанных файлах не нашел.

    Спасибо!

    пс. Проверьте Вашу почту! 🙂

  • Mark

    $(‘#pop-up-window’) – возвращает объект позволяющий оперировать свойствами DOM элемента, id которого равен pop-up-window.

    $(‘.pop-up-window’) – возвращает объект позволяющий оперировать свойствами DOM элемента, class которого равен pop-up-window.

    Исправил информацию в начале статьи, пока писал мой файл index.html плавно перекочевал в window.html

  • Марат

    Не могу скачать исходники. Пишет файл удален

    • Mark

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

  • Gordan

    Статья хорошая. Всё работает, только есть одна проблема, а что если у пользователя монитор в более низком разрешении стоит, или широкоформатный монитор, а сайт фиксированного размера.
    И ещё как сделать если ссылка находиться где нибудь в низу прокручиваемой страницы. При клике окно появляется но невидно по центру, если страницы прокручена вниз.

    Извиняюсь за глупые вопросы но я в этом не особо силён, у меня именно так и происходит.

    • Gordan, то о чем вы говорите, называется валидная верстка. И учитывается именно при ее проектировании. Другими словами,одинаково удобное отображение элементов , во всех браузерах и при любых расширениях, не очень относится к программной части. Поэтому, я оставляю данные задачи на доработку, читателей, по их усмотрению.

  • Оксана

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

  • Все css можно не создавать по новой, но отдельный блок придется. Для каждого окна свой блок будет. Затем нужно сделать функцию, в которую передать либо идентификатор окна, либо сам элемент, а в функции уже обрабатывать вывод.

  • Victor

    Спасибо за статью. коротко и ясно !!!

  • Sergey

    как сделать чтобы окно появлялось при нажатии на кнопку а не автоматически?

    • Повесить обработчик события click на нужный элемент.

  • Илья

    Как сделать, чтобы все кроме баннера затемнялось полупрозрачным слоем?

    • Копайте в сторону события fadein в jQuery.

  • Cако

    Спасибо! Более подробной инструкции, чем тут я ещё нигде не встречал. Еще раз огромное спасибо!

  • Владимир

    Приветствую.
    у меня на сайте стоит слайдшоу для которого вызывается jQuery версия 1.7.1
    но с ним не управляется всплывающее окно — оно просто есть и его невозможно закрыть
    если я дополнительно вызываю jQuery из вашей папки версии 1.7.2, то окно все равно не управляется и еще перестает работать слайдшоу
    как разрешить эту ситуацию?

    • Я думаю нужно подключать последнюю версию jQuery, при этом исключить пересечения в коде обоих скриптов окна и слайдшоу.

  • Василий

    Конечно все супер, однако пришлось удалить. Окно открывается только вверху страницы, а нужно в том месте где кнопка, и при загрузке страницы это окно появляется на секунду и пропадает, это появление портит все впечатление о сайте.

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

  • Ирина

    Доброе утро!
    Подскажите а как сделать так если пользователь закрыл это окно оно больше не появлялась при обновление страницы?
    Заранее спасибо!

    • Нужно в Cookie назначить флаг для этих целей, и переключать его при закрытии окна.

  • Доброго времени суток!
    Как заставить окно перемещаться по экрану удерживаялевой кнопкой мыши за его шапку. курсор в стилях обозначен как move, но чего-то не хватает.

    • Копайте в сторону jquery drag and drop. Одоного указания стиля курсора — недостаточно. Для осуществления перемещений элементов, небходим соответствующий механизм. В данном примере он не предусмотрен. Можете почитать вот эту статью

  • Владимир

    А как сделать это окно по верх всех окон? я правда без библиотеки делаю потому как не смог скачать там ошибка какая то на сайте. Вот у меня какая беда: _http://dacha.magaz45.ru/

    • Нужно в стилях прописать абсолютное позиционирование.

  • Антон

    Хороший, годный скрипт. Спасибо автору. Хорошо бы было сделать простенькую хтмл-страничку с демонстрацией работы скрипта. Я вот в Яндексе еще страниц 20 со скриптами перелопатил, только потому что на вашем сайте не было демо 😉

  • андрей

    отличный баннер но подскажите как сделать куки и затемнение фона пожалуйста

  • Александр

    Добрый день, при загрузке сайта окно появляется на 1 сек. Как это можно убрать. За ранее благодарен.

  • Василий

    Спасибо за статью ) вы мне очень помогли, до этого 6 часов переделывал сайт с джаваскриптом и он не работал, оказалось можно сделать всё проще )

  • OnAlex

    Огромное спасибо за то, что помогли сэкономить время! Великолепный пост!

  • Оставить комментарий

    Не отвечать

    Подписаться на комментарии к этой статье по RSS

    Яндекс.Метрика