Как сделать модальное окно jquery
Добавил пользователь Алексей Ф. Обновлено: 11.09.2024
Здравствуйте всем. Посмотрел тут на днях внимательно статистику блога и обнаружил, что больший интерес у наших интернет-трудящихся вызывают уроки и примеры по созданию модальных окон. Самыми популярными оказались решения реализации всплывающих окон без использования javascript, исключительно на чистом CSS3.
За время работы у меня накопилось немало интересных решений, которые в разное время я детально расписал в развернутых статьях на страницах своего блога, но многие из этих уроков со временем ушли на задний план. Читателям блога иной раз сложно сориентироваться и большая часть работоспособных методов создания эффектных модальных окон и всплывающих форм просто остаются незамеченными.
Поэтому, учитывая интерес пользователей к данному вопросу, решил объединить все уроки и примеры по данной теме и вывести в отдельной статье коллекцию модальных окон и форм. Получился небольшой обзор с кратким описанием, ссылками на примеры и статьи. Так что смотрите, изучайте и если кому-то, какое-либо из решений придётся по душе, смело забирайте исходники, и творите, творите, творите…
1. Модальные окна с помощью CSS3 без Javascript
Самый популярный, среди читателей моего блога, метод создания модальных окон. Очень прост в реализации. Формирование внешнего вида всплывающих блоков и весь функционал основаны исключительно на CSS3, без подключения в работу Javascript и дополнительных графических элементов.
Возможность подключения и вывода модальных окон практически на любом сайте. Достаточно правильно разместить html-каркас в нужном месте, добавить нужный вам контент, подключить стили, привязать всё это дело к активирующей кнопке или любому другому элементу сайта(картинки, пункты меню, ссылки, отдельное слово в тексте и т.д.) и всё, модальное окно готово к работе.
2. Модальное окно с помощью CSS и jQuery
3. Адаптивное модальное окно строго по центру
Изначально урок задумывался именно об абсолютной центрации блочных элементов с содержанием, но об этом столько написано, что решил разбавить тему адаптивностью и наложить всё это на модальное окно, при этом пользуясь исключительно средствами CSS. Что из этого получилось, можете узнать изучив урок.
4. Модальное окно на HTML5, CSS3 и скрытых чекбоксах
5. Модальный блок видео на CSS3
Не даёт мне покоя тема организации просмотра видео в модальном блоке, исключительно средствами CSS3, без javascrip. Нет с выводом видео в модальном окне всё в порядке, не могу найти адекватного и всех устраивающего решения остановки видео при закрытии окна. Тупо использовал ссылку с пустым атрибутом href=”/”, многих распальцованных мастеровых от этого не совсем кошерного способа переворачивает во сне, но другого более действенного и валидного решения, на данный момент пока не нашёл.
6. Ротатор контента в модальном окне
Меня часто спрашивали, можно ли встроить внутрь модального окна, какой-нибудь слайдер, не только для картинок, но и для текста. Почему бы и нет. У буржуинов нашелся простенький, подходящий по всем параметрам ротатор контента, оставалось объединить его с уже готовым модальным окном. И в итоге получилось то, что получилось:)). Посмотрите, всё довольно просто в исполнении.
7. Интеграция контактной формы в модальное окно
На многих сайтах используются всплывающие формы обратной связи, формы регистрации и входа. Проще всего встроить рабочую форму в готовое модальное окно. Берётся вполне себе приличная форма, свёрстанная на CSS3, любой вариант модального окна представленный выше, остаётся лишь оба эти элемента объединить в единый механизм. Как это сделать? Именно об этом, подробно расписано в представленном уроке.
8. Модальная форма контактов на CSS3
9. Lightbox Эффект на CSS3
Лайтбокс своего рода то же модальное окно, вернее принцип работы практически тот же, правда используется по большей части для просмотра увеличенных или полно-размерных изображений. В своё время решил заделать более-менее адаптивную версию Lightbox, исключительно средствами CSS3. Что из этого получилось сможете узнать посмотрев пример и если тема вставит, изучите и урок. Пользователи плотно подсевшие на IE 8 и ниже, к сожалению ничего не увидят, метод основан на использовании псевдокласса :target .
10. Всплывающая контактная форма для сайта
Интересное (на мой взгляд) решение создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта. Работа формы основана на обработке события onclick . Оформление с помощью оригинального изображения в виде почтового конверта. Работает форма быстро и корректно во всех браузерах, так что вполне достойный образец средств взаимодействия с пользователями.
11. Всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript
Меня, как и многих других вымораживают различные всплывающие окна при начальной загрузке сайта. Считаю такой метод черезчур навязчивым. Но фишка востребована и широко использована, а значит посмотреть как всё это дело работает, наверное всё же стоит. Все современные браузеры с подозрением относятся к разного рода всплывающим окнам на первоначальном этапе загрузки сайта, они их просто-напросто блокируют. В представленном уроке, подробно расписываю, как эту блокировку можно обойти, так же узнаете, как правильно использовать cookie, чтобы окно являлось взору пользователя один раз при первом заходе на сайт, или же с определённым интервалом.
На этом пожалуй и всё. Конечно в загашнике найдётся ещё пара-тройка рабочих вариантов создания модальных окон, а в интернетах то их сколько, главное найти то что нужно. Надеюсь эта подборка поможет сориентироваться по теме в ворохе статей моего блога. По мере удачных раскопок и нахождению затерявшегося материала, обзор будет обновляться.
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 5
Привет, а может подскажешь, плагин окон поддерживающих из коробки функции перетаскивания и загрузку iframe через атрибут html ссылки
dialog jquery ui к сожалению не подходит ( . .)
или какой нибудь другой способ открытия нескольких iframe, но не загораживающих контент сайта?
Так на вскидку, могу предложить посмотреть в сторону этого плагина: Тынц или же прикрутить Draggable к любому модальному окну
Здраствуйте! А как сделать так, чтобы окно появлялось на пару секунд(приветсвтвие посетителям) и потом само исчезало? Заранее огромное спасибо!
Привет всем кто меня видит и слышит, подскажите как сделать чтобы в модальное окно прокручивалось если много контента?
модальные окна на этом ресурсе… не модальные.!
они закрываются при нажатии кнопки вне области окна!
Привет друзья, в этому году меня несколько раз просили объяснить, как сделать модальное окно на сайте. Кто-то, изучая азы веб-разработки неизбежно приходил к ситуации, когда часть контент необходимо отобразить в модальном окне, кто-то, работая с формами, хочет показать ее не в открытом виде, а в pop-up при клике на кнопку.
Несмотря на то, что на блоге уже были статьи, косвенно связанные с реализацией этого эффекта, вопросы все равно остаются и я решил сделать несколько статей, связанных с этой темой. Сегодня разберемся просто с модальными окнами, а в следующий раз сделаем пульсирующую кнопку в углу экрана, как у сервисов обратного звонка и еще просили урок с анимацией блика на кнопке.
Все это выйдет друг за другом. Конечно, это статьи, ориентированные на новичков, и мастодонтам они будут не очень интересны, но тем, кто использует блог как справочник, возможно, пригодятся эти наработки, чтобы быстро реализовывать тот или иной эффект, не описывая одно и тоже каждый раз в новом проекте и сэкономят немного времени. Приступим.
Чтобы статья получилась максимально полной, будем придерживаться следующего плана и сделаем:
- модальное окно с использованием jQuery.
- Простое модальное окно с использованием чистого js.
Конечно же я покажу как вызывать несколько модальных окно на станице, так как это тоже один из частых вопросов, возникающих у новичков. Разберем возможность закрытия окна при клике вне области контента, решим проблему вертикальной прокрути и другие нюансы, которые возникнут в ходе работы или о которых сообщите вы в комментариях.
Структура проекта для понимания какие файлы и где находятся.
Начнем с разметки. Для создания модального окна я обычно пользуюсь такой структурой.
Где "modal" — это затемненный фон, а "modal__content" - область контента. При этом, когда срабатывает триггер, вызывающий окно, например нажатие кнопки, то к "modal" добавляется класс "modal_active", который дает понять, что модальное окно находится в открытом состоянии. Добавляя или удаляя "modal_active" мы будем открывать или скрывать модальное окно манипулирую стилями.
Большинству читающих нужна будет форма в модальном окне. Можно использовать эту.
Я, для примера, просто выведу текст:
Создал простейшую шапку сайта с кнопкой обратного звонка, которая должна вызвать модальное окно. Классический пример любого лендинга.
Давайте добавим немного стилей и приведем в порядок открытое состояние модалки. Вот, что получилось у меня.
Обратите внимание, что в правом углу контентной области модального окна появилась кнопка с изображением крестика. Файл лежит в папке "img", рядом с папкой "js" и "css".
Тут нас больше всего интересует класс ".modal". Как я и говорил, это само модальное окно с полупрозрачным фоном. Давайте подробнее разберем что там за стили.
Первым делом "вырвем" из потока блок с модальным окном при помощи фиксированного позиционирования. Затем, при помощи свойств "top", "left", "right", "bottom" растянем модальное окно по ширине на весь экран. Z-index - нужен для того, чтобы расположить окно над всеми элементами. Если у кого-то другого элемента значение этого свойства будет выше, то модальное окно не перекроет его.
Далее задаю цвет фона модального окна.
Цвет задаю в RGBA формате. Первые 3 цифры — это цвет, а последняя — прозрачность. Где ".9" — это прозрачность в 90%.
Далее использую flexbox для центрирования элемента "modal__content" внутри "modal", задаю возможность вертикальной прокрутки и внутренние отступы.
Окно прекрасно смотрится, но есть одно "но!". Помните я говорил, что активное состояния модального окна, это когда у нас есть класс "modal_active", а без этого класса, окно закрыто? Сейчас мы доведем до ума эту концепцию. Суть в том, чтобы при "modal" сделать окно скрытым, а при "modal_active" - показать.
Давайте создадим этот класс в стилях и настроим отображение окна только при его наличии.
Для показа/скрытия окна будем пользоваться "visibility", "opacity", "position" и свойство "transition" для плавности анимации появления.
Если еще подробнее, то сначала зададим нулевую прозрачность, а при помощи абсолютного позиционирования и свойства "top" уберем модальное окно за пределы видимости. Дополнительно, для надежности, при помощи свойства "visibility" скроем разметку окна.
В момент, когда появится класс "modal_active" инвертируем "visibility" и "opacity", а также поменять "position" и положение в свойстве "top".
Звучит страшнее, чем кажется, на сам деле все довольно просто.
Теперь в таком состоянии окно скрыто:
А в таком, окно открыто:
Попробуйте добавить вручную и убедиться, что окно успешно появляется.
Пол дела сделали, осталось добавлять этот класс модальному окну при клике по кнопке. Тут подход и разделится. Первый вариант сделаем с использованием jQuery, а второй без него на чистом js.
Но прежде нужно подключить файл скриптов к нашей html страничке. Делается это так:
Вызов модального окна при помощи jQuery
Исходник модального окна с использованием jQuery
Первым делом нужно подключить сам jQuery, перед скриптом, который мы добавили чуть выше. То есть порядок подключения должен быть таким:
Как и условились ранее, вызов окна будет происходить при клике на кнопку в шапке. Давайте обработаем это событие, предварительно объявив в файле "scripts.js", что весь код написанный в нем должен исполняться после загрузки страницы.
Инструменты разработчика можно открыть командой ctrl+shift+i, в некоторых браузерах клавишей f12 или через меню.
Теперь давайте добавим класс "modal_active" нашему модальному окну, а при клике на кнопку с крестиком удалим его.
Попробуйте, смотрится совсем не плохо.
Теперь давайте реализуем функционал, когда модальное окно закрывается при клике, вне области контента этого окна. Делается это довольно просто.
Проверяйте, все должно отлично работать.
Теперь давайте разберем небольшой нюанс. Когда у вас страница наполнится контентом, то неизбежно появится вертикальная прокрутка.
При этом мы сделали так, чтобы если контент не помещается в модальное окно в нем тоже появлялась прокрутка. В таком случае смотрится это не очень красиво и нужно от этого избавляться.
Делается это довольно просто. При вызове окна мы просто уберем у тега "body" возможность прокрути. А когда окно будет закрываться, вернем все все на место.
Можно пойти 2 путями: менять стили прямо в js или создать специальный класс для тега body, который и будем убирать прокрутку. Я, обычно, пользуюсь вторым способом.
Давайте в таблице создадим класс ".hidden" и пропишем ему "overflow", запрещающий прокрутку.
В скрипте, при открытии модального окна, запретим прокрутку у тега "body" путем добавления класса "hidden".
При этом, не забывайте удалять его при закрытии модального окна. В целом все это выглядит так.
Если у вас разные кнопки вызывают разные модальные окна, то привязывайтесь не к классу окна, а к "id", который должен быть уникальным на странице. То есть если у модального окна , то и обращаться к нему можно так:
Если несколько кнопок вызывают одно и тоже окно, то можно перечислить их айди и классы так:
На этом способ реализации открытия модального окна при помощи jQuery можно считать оконченным. Если будут вопросы, то задавайте в комментариях - не стесняйтесь.
Ниже я покажу как сделать два интересных варианта с модальными окнами, которые созданы при помощи JQuery и CSS. И сделаем красивые эффекты с появлением и исчезновением этих окон. Учитывая сколько их создано, то я постарался подобрать самые оригинальные стили оформления и спецэффекты. Постараюсь сделать всё очень просто и понятно, но при этом чтобы было красиво и функционально.
Немного теории:
1. Всплывающая боковая панель слева и справа
Простое модальное окно, оснащенное плавными переходами на CSS. Можно использовать для просмотра какого-то важного контента при посещении веб-сайта, меню или например как панель настроек.
HEAD
Подключаем, если ещё нет:
HTML
CSS
Здесь все просто, а это вы можете подключить и использовать сразу 2 модальных окна, которые выводятся по сторонам. Для информационного сайта очень удобно, а также можно использовать как какие-то подсказки для пользователя. Все безусловно зависит от тематики сайта. Но часто бывает нужно два разных модальных окна, а тут они уже есть и всё в одной стилистике.
2. Простое и красивое всплывающее окно с переходами на jQuery и CSS
Данный вариант окна красиво появляется и исчезает по закрытию. При закрытии окно сжимается и просто остается одна точка, которая сразу исчезает.
Модальные окна достаточно эффективное решение в современном веб-дизайне, кроме того, что пользователь остается на той же странице и получает необходимую информацию, так и красивые окна позволяют раздвинуть границы веб-дизайна, добавив особую изюминку в дизайн. Как вы уже догадались в сегодняшнем уроке речь пойдет о создании красивых модальных окон с помощью небольшого плагина jquery. Данный способ реализации окна имеет множество настроек, что позволит подогнать плагин под необходимые вам параметры, затратив при этом минимум усилий.
Чтобы сделать модальное окно более гибким, мы добавили некоторые CSS3 Media Queries, чтобы сделать его и настроить для мобильного использования. И так, давайте приступим.
Шаг 1. HTML
Мы начнем с создания нового документа с помощью HTML5 разметки. Необходимо заметить, что мы также подключили JQuery библиотеки (размещение в Google) в нижней части нашей страницы для оптимизации загрузки страниц.
Так мы сократим скорость загрузки страницы, ведь часть этих скриптов уже хранится в кэше браузера. Далее мы рассмотрим кнопки для вызова окна.
С разметкой закончили, перейдем к следующему шагу.
Шаг 2. CSS
Для начала мы рассмотрим общие стили которые используются для демонстрации, и мелкие настройки.
Далее создаем базовое модальное окно, мы будем использовать visibility:hidden; для того чтобы скрыть окно до момента нажатия кнопки.
Далее мы стилизуем заголовок в модальном окне, мы будем использовать градиентную заливку, и немного теней, для придания большей эффектности.
background - image : - webkit - linear - gradient ( top , rgb ( 249 , 249 , 249 ) , rgb ( 233 , 233 , 233 ) ) ;
background - image : - moz - linear - gradient ( top , rgb ( 249 , 249 , 249 ) , rgb ( 233 , 233 , 233 ) ) ;
background - image : - o - linear - gradient ( top , rgb ( 249 , 249 , 249 ) , rgb ( 233 , 233 , 233 ) ) ;
background - image : - ms - linear - gradient ( top , rgb ( 249 , 249 , 249 ) , rgb ( 233 , 233 , 233 ) ) ;
Далее стилизуем текст находящийся в середине модального окна, тут достаточно все просто.
Теперь рассмотрим кнопки выбора в модальном окне, здесь немного интереснее, мы добавим тень, и простые иконки которые позволят нам добавить большего реализма и визуально оформить кнопки.
background : - webkit - linear - gradient ( top , rgba ( 170 , 212 , 79 , 1 ) 0 % , rgba ( 116 , 185 , 49 , 1 ) 90 % , rgba ( 106 , 173 , 45 , 1 ) 95 % , rgba ( 96 , 157 , 41 , 1 ) 100 % ) ;
background : - moz - linear - gradient ( top , rgba ( 170 , 212 , 79 , 1 ) 0 % , rgba ( 116 , 185 , 49 , 1 ) 90 % , rgba ( 106 , 173 , 45 , 1 ) 95 % , rgba ( 96 , 157 , 41 , 1 ) 100 % ) ;
background : - o - linear - gradient ( top , rgba ( 170 , 212 , 79 , 1 ) 0 % , rgba ( 116 , 185 , 49 , 1 ) 90 % , rgba ( 106 , 173 , 45 , 1 ) 95 % , rgba ( 96 , 157 , 41 , 1 ) 100 % ) ;
background : - ms - linear - gradient ( top , rgba ( 170 , 212 , 79 , 1 ) 0 % , rgba ( 116 , 185 , 49 , 1 ) 90 % , rgba ( 106 , 173 , 45 , 1 ) 95 % , rgba ( 96 , 157 , 41 , 1 ) 100 % ) ;
background : linear - gradient ( top , rgba ( 170 , 212 , 79 , 1 ) 0 % , rgba ( 116 , 185 , 49 , 1 ) 90 % , rgba ( 106 , 173 , 45 , 1 ) 95 % , rgba ( 96 , 157 , 41 , 1 ) 100 % ) ;
background : - webkit - linear - gradient ( top , rgba ( 248 , 114 , 136 , 1 ) 0 % , rgba ( 243 , 71 , 85 , 1 ) 90 % , rgba ( 225 , 65 , 77 , 1 ) 95 % , rgba ( 206 , 59 , 70 , 1 ) 100 % ) ;
background : - moz - linear - gradient ( top , rgba ( 248 , 114 , 136 , 1 ) 0 % , rgba ( 243 , 71 , 85 , 1 ) 90 % , rgba ( 225 , 65 , 77 , 1 ) 95 % , rgba ( 206 , 59 , 70 , 1 ) 100 % ) ;
background : - o - linear - gradient ( top , rgba ( 248 , 114 , 136 , 1 ) 0 % , rgba ( 243 , 71 , 85 , 1 ) 90 % , rgba ( 225 , 65 , 77 , 1 ) 95 % , rgba ( 206 , 59 , 70 , 1 ) 100 % ) ;
background : - ms - linear - gradient ( top , rgba ( 248 , 114 , 136 , 1 ) 0 % , rgba ( 243 , 71 , 85 , 1 ) 90 % , rgba ( 225 , 65 , 77 , 1 ) 95 % , rgba ( 206 , 59 , 70 , 1 ) 100 % ) ;
background : linear - gradient ( top , rgba ( 248 , 114 , 136 , 1 ) 0 % , rgba ( 243 , 71 , 85 , 1 ) 90 % , rgba ( 225 , 65 , 77 , 1 ) 95 % , rgba ( 206 , 59 , 70 , 1 ) 100 % ) ;
Со стилями мы закончили, теперь рассмотрим некоторые параметры скрипта.
Шаг 3. JavaScript
Теперь мы должны вернуться к нашему HTML-документу и добавить следующие строки в нижнюю часть нашего документа, в котором мы ссылаемся Reveal-плагин. Вот некоторые параметры.
Читайте также: