Создаем собственное всплывающее окно на javascript, css и jQuery. Какой способ выбрать?


Создаем собственное всплывающее окно на javascript, css и jQuery. Какой способ выбрать?

Доброго времени суток всем читателям данной статьи. Если для своего веб-сервиса вам необходимо сделать всплывающее окно, то вы нашли правильную публикацию! Сегодня я расскажу вам как создается всплывающее окно JavaScript, css и jQuery инструментами.

В статье подробно будут рассмотрены 3 варианта написания всплывающих окон с затемненным фоном и в конце проведен анализ каждого способа. Любой понравившийся код из представленных примеров вы сможете впоследствии использовать в своих программах. А теперь за дело!

Нет, ну скажите, зачем оно вообще нужно!?

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

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

popup окно

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

Не могу промолчать и о третьем способе использования всплывающих окон. Это спам и реклама.

Начнем с простого

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

Итак, сама разметка веб-страницы вмещается в несколько строк, потому что весь сок состоит в правильной стилизации.

Popup window

Как видите, все очень просто. А теперь перейду к каскадным таблицам. Вот там-то кода будет много, но он опять-таки легкий.

Возможности JavaScript

В скриптовом языке встроено множество возможностей создавать всплывающие окна. Так, попапы можно вызвать при помощи стандартных функций alert, confirm и prompt.

Alert выводит простое сообщение пользователю. В прошлых публикациях я много раз использовал этот метод. Закрыть такое окно можно нажав крестик или «OK». Синтаксис выглядит следующим образом:

Confirm необходим для задания вопроса пользователям. Такое окошко часто можно встретить при выходе с сайта или проверке какой-либо информации о вас. К примеру:

Если в появившееся окно стандартного вида можно ввести какую-то информацию, то это prompt.

Помимо этого, в js у window существует метод, который позволяет загружать новые страницы и открывать новые окна. Это

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

window on js

Благодаря такому коду всплывающее окно будет появляться сразу после загрузки страницы. Заметьте, что параметры нужно перечислять через запятую и обязательно без пробелов.

Работа с jQuery

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

#popUp < top: 12%; left: 50%; height: 200px; position: fixed; width: 300px; border-radius: 11px; background: #fef; margin-left: -150px; margin-top: -100px; display: none; opacity: 0; padding: 17px; z-index: 6; >#popUp #close < cursor: pointer; position: absolute; width: 23px; height: 23px; top: 17px; right: 17px; display: block; >#overlay Какое-то предложение!

Что лучше?

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

Поэтому экспериментируйте, изучайте новые способы реализации и не забывайте подписываться на мой блог. Я всегда рад новым подписчикам! До встречи! Пока-пока!


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

Ваш адрес email не будет опубликован. Обязательные поля помечены *