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

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

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

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

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

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

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

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

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

Добавить комментарий

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

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

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

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

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

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

  • 26.08.2014 21:22

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

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

  • 14.06.2014 18:27

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

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

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

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

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

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

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

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

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

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