16-12-2015, Скрипты

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

Что мы создадим?

В этом уроке мы создадим простое и красивое popup окно на jquery. Оно будет похоже на то, что используется в twitter. Естественно, вы сможете придать стиль, какой вам по душе.

internal-popup

Каким функционалом будет обладать окно?

  • Мы хотим, чтобы оно центрировалось на странице сайта, при его выводе.
  • Должна быть кнопочка «закрыть», или что-то подобное.
  • Когда мы кликнем вне блока – popup окно закроется автоматически.
  • Когда окно выведено, страница должна покрываться тенью, чтобы пользователь мог сфокусироваться.

Начнем разработку

Для реализации popup окна, мы будем использовать CSS и несколько строк jQuery кода, ну и само собой HTML. Заметьте, что для воплощения нашей идеи, не нужно никаких плагинов и дополнительных инструментов, все очень просто и надежно!

Создадим ссылку с определенным классом и div блок с идентичным id. Вот так:


 

Заметьте, имя класса ссылки и id div блока имеют те же значения. Это для связи этих элементов. Перед тем, как перейдем к написанию jQuery кода, добавим немного css стилей для окна.


 

Мы определим некоторые другие CSS стили в JavaScript коде.  Эти стили требуют дополнительных вычислений, поэтому лучше будет сделать это с помощью jQuery. Давайте перейдем к javascript коду.

jQuery код popup окна

Для начала, подключите jQuery файл библиотеки. После чего, инициализируем jQuery и добавляем div #blackout в тело документа. Также определяем ширину popup окна.


 

Далее, создаем функцию, которая центрирует окно. Ранее мы установили absolute позиционирование в CSS, мы не можем использовать margin: 0px auto; нам необходимо определить ширину экрана, отнять от этого ширину popup окна, и все это разделить на 2. Высотой будет текущая позиция скролла, плюс где-то 150px.

Немного ранее мы создавали #blackout div, это для накрытия тенью контента страницы. Теперь нам нужно убедиться, что этот блок будет иметь ширину и высоту идентичную монитору. Это также рассчитывается в этой функции.


 

Эта функция должна запускаться 3 раза. Когда пользователь использует скроллинг, когда пользователь изменяет размер окна, также изначально, когда загружается страница.


 

В конце, нам нужно установить события кликов. Когда пользователь кликает в область вне окна, оно должно закрыться. Когда пользователь нажал на «X», окно также должно исчезнуть. В случае кликов внутри popup окна, ничего не должно происходить. В коде добавлены комментарии, чтобы проще было разобраться.


 

На этом, создание popup окна на jQuery завершено! Нам не нужно скачивать плагины и писать сложные функции, всего несколько строк кода. Вы можете скачать исходники и посмотреть, как это работает локально, на вашем компьютере.

Источник: http://sitear.ru/material/jquery-popup-okno

Остались вопросы? Задайте их в комментариях ниже.

 

[wpfilebase tag=file id=46 /]

Теги:
[Всего голосов: 0    Средний: 0/5]

RomualdShmidtelson

Веб-разработчик. Работа с проектами простой и средней сложности. Верстка, программирование. Simpla, Drupal, Wordpress.

Отправить письмо