Сегодня мы разберемся с вами как делать всплывающее окно jquery, чтобы показывать скрытый контент по запросу, например чтобы показать . Сделать это достаточно просто, дочитайте до конца.
Как сделать всплывающее окно jquery
Всплывающее окно jquery состоит из таких элементов:
- фона или затемнения
- всплывающего окна
- контента всплывающего окна
Итак, как всегда, сначала приступим к верстке HTML.
Заголовок всплывающего окна X
Содержимое всплывающего окна, форма обратной связи или что-то, что вам нужно.
Готово, у нас уже есть затемнение (.popup_overlay), всплывающее окно (.popup), заголовок всплывающего окна (.popup_title), кнопка закрытия всплывающего окна (.closer), и содержимое всплывающего окна (.popup_content).
Теперь нам нужно сделать так, чтобы это всплывающее окно отображалось всплывающим, а не просто так, и чтобы затеменение перекрывало фон.
Popup_overlay{ display: none; background: rgba(0,0,0,.9); width: 100%; height: 100%; position: fixed; top: 0; left: 0; } .popup{ display: none; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,1); width: 600px; height: 500px; position: fixed; top: 50%; left: 50%; margin-left: -300px; margin-top: -250px; } .popup_title{ font-weight: bold; padding: 10px; } .popup_content{ padding: 10px; border-top: 1px solid #ccc; } .closer{ float: right; cursor: pointer; }
Готово. Всплывающее окно jquery оформлено. Если заметили, у самого всплывающего окна и у затеменения стоит display: none, это сделано для того, чтобы всплывающее окно не показывалось на сайте до нужного момента. А теперь добавим отображение всплывающего окна в нужный момент (то есть по нажатию на нужную кнопку).
Всплывающее окно jquery
Ну а теперь код на jquery. Все достаточно просто. Привязывем действие на событие клика на нужную кнопку.
$(function(){ $("button").click(function(){ $(".popup,.popup_overlay").fadeIn(400); //показываем всплывающее окно }); $(".closer,.popup_overlay").click(function(){ $(".popup,.popup_overlay").fadeOut(400); //скрываем всплывающее окно }); });
Готово. Всплывающее окно будет отображаться и скрываться тогда, когда нам нужно (при нажатии на кнопку button и кнопку.closer соответственно).
Довольно часто на сайтах можно повстречать модальные окна, и все они используются для разных задач. В самом деле, это довольно мощное средство, которое позволяет сделать интерфейс сайта более интерактивным и удобным. К примеру, модальные окна могут быть использованы для различных форм, таких как форма авторизации, форма обратной связи, оформление заказа товара, да и мало ли.
В данном посту мы рассмотрим пример, как сделать модальное простое окно с помощью JQuery и CSS. Особенность данного примера в том, что тут не требуется , ну за исключением самой библиотеки JQuery.
Размещаем код модального окна на странице:
Как видно из разметки, блок самого модального окна это div c атрибутом id=modal_form , который содержит элемент span c id=modal_close . Этот элемент будет служить кнопкой для закрытия модального окна, кроме того, ниже блока расположен блок div с атрибутом id=overlay , который служит одновременно и для затемнения фона. Модальное окно будет открываться по ссылке, с классом modal .
CSS для модального окна
#modal_form { width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px; } #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #overlay { z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80); width:100%; height:100%; top:0; left:0; cursor:pointer; display:none; }
Для modal_form мы задали фиксированную ширину и высоту, а затем отцентрировали положение по центру экрана. Для подложки модального окна (overlay ) мы задаем размер по ширине экрана, заливку с прозрачностью, а так же прячем её по умолчанию. Особый момент с z-index , у модального окна он должен быть наибольшим из всех элементов на странице, а у обложки должен быть больше всех элементов, кроме самого модального окна.
Теперь к самому основному, это код на javascript. Для модального окна будет использоваться два основных события, это его открытие — клик по элементу с классом modal , в нашем случае это ссылка, и закрытие модального окна, это клик по обложке (overlay ), либо клик на кнопку закрыть, в нашем случае это элемент span с id=modal_close .
$(document).ready(function() { $(".modal").click(function(event){ event.preventDefault(); $("#overlay").fadeIn(400, // анимируем показ обложки function(){ // далее показываем мод. окно $("#modal_form") .css("display", "block") .animate({opacity: 1, top: "50%"}, 200); }); }); // закрытие модального окна $("#modal_close, #overlay").click(function(){ $("#modal_form") .animate({opacity: 0, top: "45%"}, 200, // уменьшаем прозрачность function(){ // пoсле aнимaции $(this).css("display", "none"); // скрываем окно $("#overlay").fadeOut(400); // скрывaем пoдлoжку }); }); });
Посредством animate мы меняем позицию по вертикали top , а так же прозрачность opacity , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.
Это легкое JQuery модальное всплывающее окно плагина (только 1.49KB). Скрипт не создает и не стилизует всплывающее окно, но предоставляет вам всю логику центрирования, модального наложения, события и многого другого. Это дает вам много возможностей для настройки, что будет соответствовать вашим потребностям.
2. Messi
Это плагин JQuery, чтобы показать чистоту, элегантность сообщения. С Месси, вы избежите использования значения по умолчанию, уведомления о тревоге или новых окон, чтобы обеспечить расширенную информацию для пользователя.
3. Shadowbox.js
Стандартное приложение просмотра, которое поддерживает все самые популярные форматы веб-издательских средств массовой информации.
4. jQuery Impromptu
Расширение, чтобы помочь обеспечить более приятный способ спонтанно побудить пользователя для входа. Более или менее это отличная замена для оповещений.
Demo
Плагин для JQuery, чтобы помочь вам отображать уведомления, диалоги, и модальные окна в веб-браузере.
Demo
6. Colorbox – a jQuery lightbox
Легкий настраиваемый лайтбокс плагин для jQuery
Demo
Обеспечивает быстрый способ показать данные без перезагрузки страницы.
Demo
8. jQuery Speedo Popup
Маленький, мощный и настраиваемый JQuery Popup / модальный плагин. Построенный на HTML5 и CSS3.
Demo
9. Boxy
Гибкое диалоговое окно, Facebook стиль для JQuery с поддержкой перетаскивания и размера промежуточных кадров. Он отличается от других накладок, которые я видел, предоставляя интерфейс объекта для управления диалоговыми окнами после того как они были созданы.
Легкий JQuery плагин, который обеспечивает мощный интерфейс для окна. Думайте о нем, как о модальный окне.
Demo
11. Smooth Popup
Как создать потрясающее и большое всплывающее окно с нуля, используя JQuery в простом и чистом уроке …
Demo
12. Exit Modal Box
Вы должны показать конкретное сообщение для посетителей, которые оставляют ваш сайт? Вы можете сделать это путем инициирования модального окна, прежде чем они закроют окно браузера.
Demo
13. jQuery BlockUI Plugin
Позволяет моделировать синхронное поведение при использовании AJAX, без блокировки браузера. При его включении будет препятствовать активности пользователей со страницы (или части страницы), пока она не будет отключена. BlockUI добавляет элементы в DOM, чтобы дать ему внешний вид и поведение блокирующих взаимодействия с пользователем.
Demo
14. Tickbox (depracated)
Виджет пользовательского интерфейса веб-страницы написаны на JavaScript в верхней части библиотеки JQuery. Его функция заключается в том, чтобы показать одно изображение, несколько изображений, встроенный контент, iframed содержание или содержание подается через AJAX в гибридной форме.
17. Simple jQuery Modal
Создать модальное окно используя Jquery
18. Likno Web Modal Windows Builder
Likno Web Builder является мощным WYSIWYG программным обеспечение для создания потрясающих JQuery модальных окон, диалоговых окон, модальных слайд-шоу, всплывающих окон и т.д. Приложение создает весь код, необходимый для того, чтобы не требовались навыки программирования. Все результаты кросс-браузерны, для CMS и для устройств.
1. Модальное окно на jQuery «Simple Modal Box»
2. jQuery плагин «LeanModal»
Отображение контента в модальных окнах. Для просмотра плагина в действии на демонстрационной странице нажмите на ссылку: Sign Up Form или Basic Content.
3. jQuery плагин «ToastMessage»
Всплывающие сообщения. Плагин в двух вариантах. В одном случае сообщения исчезают самостоятельно, по прошествии определённого времени, во второй реализации для того чтобы закрыть сообщение необходимо нажать на кнопку.
4. Содержимое, всплывающее в модальном окне
Плагин «Reveal». Для просмотра плагина в действии нажмите на кнопку «Fire A Reveal Modal» на демонстрационной странице.
5. Симпатичные диалоговые окна
Нажмите на крестик на демонстрационной странице, чтобы посмотреть плагин в действии.
6. Mootools модальное окно, плагин «MooDialog»
7. jQuery всплывающая панель сверху экрана
8. jQuery всплывающее окно
jQuery плагин для отображения формы обратной связи во всплывающем окне.
10. MooTools плагин «LightFace» для реализации диалоговых окон Facebook
Диалоговые окна в стиле Facebook. Помимо статической информации в окна можно поместить изображения, фреймы, Ajax запросы. Много настроек работы плагина, очень мощный инструмент. Выглядит очень стильно и функционально. Пройдите по ссылкам на демонстрационной странице чтобы посмотреть примеры с различным содержимым.
11. jQuery модальное окно
Аккуратное всплывающее диалоговое окно на jQuery.
12. Модальные окна jQuery
Симпатичные всплывающие модальные окна. Три стилевых оформления. На демонстрационной странице представлено 3 ссылки для вызова окон.
13. Модальные окна jQuery
Всплывающие модальные окна нескольких видов. Для просмотра плагина в действии нажмите на ссылку на демонстрационной странице.
15. Всплывающее поверх страницы сообщение
Сообщение отображается поверх страницы, которая, в свою очередь, затемняется. Нажмите на надпись «Click me» на демонстрационной странице, чтобы увидеть всплывающее сообщение. Нажатие на крестик его закроет. Реализовано с помощью jQuery.
16. Модальное окно «ModalBox» на javascript
Реализация современных модальных диалоговых окон без использования всплывающих окон и перезагрузок страницы. На демонстрационной странице нажмите на кнопку «Start Demo» чтобы посмотреть на работу скрипта.
17. «Leightbox» плагин с использованием библиотеки Prototype
Плагин для отображения контента в модальных окнах.
Здравствуйте, уважаемые читатели a! Однажды я уже писал о модальных окнах, то была статья . В этой статье покажу способ создания всплывающего окна на любом сайте. Использовать будем jQuery плагин fancybox . А чтобы добавить смысловой нагрузки статье, вставим в модальное окошко форму отправки письма. Сразу хочу заметить модальные окна на этом плагине работают на всех браузерах. Приступим!
Что нам понадобится?! не так уж и много:
- библиотека jQuery;
- плагин fancybox;
- сценарий PHP для отправки сообщения.
Разметка
Скачать актуальную версию плагина Вы сможете по ссылке выше. Что касается плагина fancybox , очень хороший инструмент для создания окон на веб-сайте. В окна можно включать любое содержимое видео, изображения (как по одиночке так и галереей), текст, плавающие фреймы, плагин имеет кучу настроек (о них чуть ниже) + то что он работает одинаково корректно во всех браузерах, очень радует.
Разметку не стану усложнять, просто кликаем по ссылке и открывается окно с формой отправки сообщения:
<a class = "modalbox" href = "#inline" > Отправить сообщение</ a > |
Где значение атрибута href совпадаем с идентификатором блока div в котором располагается форма отправки письма:
1 | Отправка сообщения
|