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

Всплывающее окно на jQueryЯ думаю, что вы уже довольно часто встречали на многих сайтах, так называемые всплывающие окна или их еще называют popup-окна. Как правило, они применяются для размещения рекламы или различных форм подписки, регистрации, авторизации и т.д.

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

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

Если вы хотите научиться создавать такие popup-окна, то обязательно досмотрите урок до конца.

Смотреть видеоурок

Что касается кроссбраузерности, то данный popup работает в:

  • Internet Explorer 7+
  • Chrome
  • Firefox
  • Opera
  • Safari
  • Яндекс Браузер

Поэтому можете смело применять его на своих сайтах и не бояться за кроссбраузерность.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийКомментариев (20)

Сергей 28 мая 2015 г. в 22:20

Спасибо уже нашел)

Ответить

Сергей 28 мая 2015 г. в 21:52

скажите где найти инструкцию чтобы скопировать сss код?

Ответить

Михаил 24 февраля 2015 г. в 21:18

Подскажите, как при нажатии на картинку всплывает popup окно?

Ответить

Сергей 30 января 2015 г. в 04:59

Добрый день! Подскажите, а как сделать так чтоб была возможность вывода нескольких всплывающих окон в рамках одной страницы (на разных ссылках)?

Ответить

Алексей 13 сентября 2014 г. в 23:08

Ох как надоели эти видеоуроки 🙂 Текстом бы продублировали, а?)

Ответить

Александр Пауков 14 сентября 2014 г. в 00:16

Алексей, как говориться, на вкус и цвет) Кому-то больше нравится видео, а кому-то текст, поэтому всем трудно угодить. Но идея хорошая. Я подумаю над дублирование видео в текст.

Ответить

alexandr 26 августа 2014 г. в 21:22

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

Ответить

Дмитрий 19 июня 2014 г. в 10:48

Здравствуйте, прекрасная статья, все получилось, но мне ОЧЕНЬ НУЖНО чтобы было два разных окна с разной информацией на одной странице, как это можно сделать?

Ответить

Александр Пауков 19 июня 2014 г. в 12:23

Дмитрий, ответ на ваш вопрос, я отправил к вам на e-mail.

Ответить

Вася 14 июня 2014 г. в 18:27

Александр, подскажите как на одной странице использовать этот функционал несколько раз? К примеру, в качестве кнопки "подробнее" для ряда материалов.

Ответить

Дмитрий 28 апреля 2014 г. в 11:26

К сожалению ваш скрипт не работает.

Ответить

Александр Пауков 28 апреля 2014 г. в 16:00

Дмитрий, скрипт рабочий 100%. Можно посмотреть то, что вы делали?

Ответить

Александр 11 апреля 2014 г. в 22:04

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

Ответить

Александр Пауков 12 апреля 2014 г. в 13:27

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

Ответить

Сергей 14 марта 2014 г. в 04:10

Здравствуйте!
Спасибо за урок. Всё подробно и ясно.
У меня вопрос. Когда контента в окне много, окно выходит за пределы экрана по вертикали и часть контента не видно, а прокрутить нет возможности. Как сделать, что бы можно было проскролить страницу до нижней части окна.

Ответить
Показать все комментарии

Александр Пауков 15 марта 2014 г. в 10:25

Сергей, самый простой способ, чтобы была возможность скроллить контент всплывающего окна. Это во-первых, задайте ему ширину и высоту (чтобы окно гарантированно находилось в центре экрана), во-вторых, для всплывающего окна укажите свойство overflow: auto. Это добавить к вашему окну скроллбар и у пользователя будет возможность проскроллить весь контент до конца.

Ответить

Сергей 20 марта 2014 г. в 02:01

Спасибо за ответ.
Я не правильно сформулировал вопрос. Дело не в контенте в окне, а в размере самого окна. Если окно больше чем экран. Как сделать, что бы окно было фексировано и прокручивалось вместе со страницей?
И если мне нужно два окна на странице с разным контентом, для второго окна нужно отдельный js файл создавать и стили прописывать?

Ответить

Александр Пауков 21 марта 2014 г. в 12:58

Сергей, ответ на ваши вопросы, я отправил к вам на e-mail.

Ответить

Сергей 23 марта 2014 г. в 05:02

Спасибо! Именно то, что мне было нужно.

Ответить

Александр 11 апреля 2014 г. в 21:44

Александр, отправьте мне тоже ответ на этот вопрос "Если мне нужно 4 всплывающих окна с разным контентом на одной странице , для последующих окон нужно отдельный js файл создавать и стили прописывать?А то какие-то трудности.Спасибо.

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

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

« Вернуться назад