Модальное окно для сайта на чистом CSS и JavaScript
Модальное окно – это элемент интерфейса, которой визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы .
При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно).
Вызов модального окна можно привязать к различным событиям на странице, но в большинстве сценариев это осуществляется при нажатии на кнопку или ссылку.
Изображение модального окна:
Оно состоит из заголовка (хедера), основной части и футера.
В заголовке обычно выводят название окна и элемент, с помощью которого его можно закрыть. В основной части располагают содержимое, а в футере – кнопки для выполнения различных действий.
Подключение CSS и JavaScript-файлов к странице
Исходные коды модального окна расположены на GitHub в рамках проекта ui-components в папке modal .
Для установки модального окна на страницу необходимо подключить к ней файлы:
- CSS: modal.css ;
- JavaScript: modal.js .
Создание и настройка модального окна
Этот скрипт создаёт модальное окно динамически. То есть здесь не нужно вставлять какой-то HTML-код непосредственно на страницу. Реализовано это в коде через класс. Шаблон модального окна содержится в приватном свойстве #template :
Следовательно, для того, чтобы сделать модальное окно достаточно просто создать новый экземпляр класса ItcModal :
При создании окна вы можете сразу же его настроить, для этого в ItcModal необходимо передать аргумент в формате объекта:
Ключ title отвечает за заголовок, content – за содержимое, footerButtons – за кнопки в футере окна.
Эти ключи являются не обязательными . Если их не указать, то создастся окно с заголовком «Новое окно» , без содержимого и кнопок:
Пример создания модального окна с заголовком «Какой-то текст» и содержимым <p>Мой контент</p> :
В качестве содержимого можно передавать HTML-код.
Добавление кнопок в футер окна осуществляется с помощью ключа footerButtons . Он принимает в качестве значения массив объектов. Каждый объект в этом массиве представляет собой кнопку . Она в свою очередь задаётся посредством ключей text , class и action . С помощью них вы можете кнопке соответственно установить текст, класс и атрибут data-action :
Методы
Управление созданным модальным окном осуществляется посредством методов:
- show – открытие;
- hide – закрытие;
- dispose – удаление из DOM HTML-элементов модального окна и обработчика события click ;
- setBody – установка основного содержимого;
- setTitle – изменение заголовка.
Открытие модального окна:
Скрытие модального окна:
Изменение заголовка и тела модального окна:
Уничтожение модального окна:
Данную операцию имеет смысл использовать только в том случае, если созданное окно вам больше не нужно на странице.
События
Если вам нужно выполнить какие-то действия при открытии и закрытии модального окна, то можете воспользоваться событиями:
Примеры
1. Открытие модального окна при нажатии на кнопку:
2. Открытие одного и того же модального окна при нажатии на разные кнопки (определяется через data-атрибут data-toggle=»modal» ):
3. Заголовок и содержимое модального окна устанавливается из значений data-атрибутов кнопки, посредством которой оно вызывается:
4. Обработка события click для кнопок, расположенной в футере модального окна:
5. Создание 2 разных модальных окон. Первое модальное окно открывается при нажатии на кнопки с data-атрибутом data-toggle=»modal-1″ , а второе – при клике на data-toggle=»modal-2″ :
6. Загрузка данных в модальное окно посредством AJAX:
7. Работа с событиями, возникающими при открытии и закрытии модального окна:
Внутреннее устройство модального окна
Код JavaScript модального окна представлен посредством класса ItcModal :
В конструкторе мы создаём DOM-элемент и формируем его HTML-структуру. Ссылку на созданный элемент мы помещаем в приватное свойство #elem . Данное свойство мы будем использовать в других методах ItcModal . Для вставки на страницу модального окна используется метод append .
Приватное свойство #disposed применяется для хранения состояния. По умолчанию оно имеет значение false . Это свойство связано с методом dispose() . При вызове этого метода, модальное окно удаляется со страницы. Но, кроме этого, также удаляется событие, связанное с ним. Для отметки этого действия, свойству #dispose присваивается значение true :
После этого действия мы не сможем открыть модальное окно, так как его уже нет. Чтобы это не приводило к ошибкам в коде, в метод show добавлена следующая проверка:
При открытии и закрытии модального окна, код генерирует события show.itc.modal и hide.itc.modal с помощью метода dispatchEvent . Сами события находятся в приватных свойствах #eventShowModal и #eventHideModal . Эти события вызываются для this.#elem . Используя их, вы можете очень просто добавить нужную логику при открытии и закрытии модального окна:
Приватный метод #handlerCloseModal является обработчиком события click и используется для закрытия модального окна. То есть он выполняется при нажатии на крестик или при клике на backdrop . Это действие мы вынесли в отдельный метод для того, чтобы потом мы могли удалить его при вызове метода dispose .
Создание модального окна с помощью библиотеки jQuery
Создание появляющегося модального окна для интернет-ресурса сделать довольно просто. Для этого будут использоваться библиотеки Jquery и опция Bpopup. Данные продукты с открытым исходным кодом могут использоваться без ограничений.
Как создать модальное окно за 5 минут
Итак, при создании модального окна будут созданы:
- index.html — основной файл разметки для верстки окна и сопутствующих компонентов;
- main.js — логический блок для работы окна;
- style.css — элемент отвечающий за внешний вид появляющегося окна.
В данном файле используются jQuery и Bpopup.
Следует отметить, что при использовании jQuery — библиотек, она должна в коде идти первой, для корректного функционирования окна, а впоследствии только все остальные скрипты на jQuery и Javascript.
В файле index.html использовалась CDN-версии библиотек, то есть данные библиотеки хранятся на внешних сайтах.
В заключении подключается main.js (наш код для логики вызова всплывающего окна) и openapi.js — библиотека для работы с Vkontakte.
Создадим файл main.js
В представленном файле задается следующий функционал:
- bclose() — закрывает окно в результате клика по «закрыть»;
- bopen() — открывает окно по нажатии на кнопку «открыть»;
- $(document).ready — при загрузке всех DOM-элементов на странице, позволяет исполнить код в рамках данного блока;
- setTimeout — функция задержки (выставлена на 1 сек.);
- VK.Widgets.Group(. ) — загрузка элемента управления в всплывающее окно.
А теперь давайте создадим css-стили для нашей страницы:
Когда вы сохраните все три файла на вашем компьютере в одной папке и запустите index.html, вы увидите следующий результат:
Кстати, если вы хотите изучить основы языка Javascript и библиотеки jQuery, вы можете пройти наш курс.
Выводы
Используя библиотеки и готовые решения, большинство популярных задач по программированию веб-сайтов вы можете решить буквально за 5 — 10 минут, а иногда даже заработать на решении подобной задаче 50 — 200 долларов на сайтах фрилансеров.
Если вы хотите научиться создавать сайты на профессиональном уровне и зарабатывать хорошие деньги — вы можете пройти большой курс Профессия веб-программист, который состоит из шести модулей по программированию, а интерактивные задания (написание кода в браузере), не позволят вам заскучать 🙂
Модальное окно на чистом CSS и JS
Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего портфолио и, возможно, даже целого проекта. При добавлении модального окна для авторизации на свой сайт, я подумал, а что будет, если публиковать подобные модульные вещи, чтобы любой человек мог их скопировать и не думать о них, а использовать в разработке. То есть создать готовый модуль для встраивания. Мне, как разработчику было бы удобно использовать готовое решение, тем более написанное мною, да и делиться опытом — дело приятное 🙂
NB
сам сайт скрыт для сохранения интеллектуальной собственности 🙂
А теперь пошаговое создание:
Здесь представлена несложная разметка для модального окна.
Перед разъяснением элементов и их стилей, мы укажем скрытие ползунка прокрутки для body, которое нам будет мешать:
Давайте поясню, что есть что:
modalBackground — это фон, расположенный за модальным окном. Через него мы будем видеть наш сайт < background: rgba(0, 0, 0, 0.8); >, в то время как основной фокус будет на модальном окне. Для корректного расположения, чтобы наш фон покрывал весь сайт — мы делаем его с положением < position: fixed >и размерами на весь экран < width: 100%; height : 100%; >. А для наложения поверх других окон или элементов сайта — < z-index: 1 >. Стоит отметить, что изначально мы не можем видеть наше окно < display: none >. Для отображения возможности нажатия на фон — делаем указатель через
modalActive — непосредственно наше модальное окно. Его размеры < width: 350px; height : 495px; >я подбирал исходя из удобства верстки для маленьких экранов, так что размеры можно указать свои. Мы позиционируем наше модальное окно по центру < position: absolute; top: calc(50% - 250px); left: calc(50% - 175px); >. Делаем рамки закругления в 10 пикселей < border-radius: 10px >. Курсор для удобства делаем стандартным < cursor: default >. Свойства background-color и padding в данном случае ни на что не влияют, они используются для фона нашего окошечка внутри и для внутренних отступов нашего окошечка соответственно. Поэтому их можно ставить на свой вкус и цвет 🙂
modalClose — это наш крестик. Я использовал два варианта выхода из модального окна, кому как удобнее — через нажатие на фон, либо через нажатие на крестик (этот вариант предпочтительнее для мобильных устройств из-за маленького экрана, по сравнению с монитором ноутбука/компьютера/планшета). Для крестика соответственно используется тег modalCross с указанием в img пути к картинке-крестика. Свойство font-family используется для выбора семейства шрифта, здесь оно не играет роли (на ваш вкус и цвет).
modalWindow — внутри него располагается содержимое нашего окна, для удобной верстки внутреннего содержимого устанавливаем относительное позиционирование относительно нашего модального окна < position: relative >. Какое оно будет — зависит только от вас 🙂
Теперь приступим к части оживления нашего окна с помощью жабаскрипта JS !
Прежде всего нам надо получить все элементы, с которыми нам предстоит работать:
Стоит отметить, что при использовании метода getElementsByClassName мы будем получать массив всех элементов. Поэтому для корректного обращения к конкретному элементу — мы указываем индекс получаемого элемента. А так как наши массивы состоят из одного элемента — индекс во всех случаях равен [0].
Переменная modalTrigger — содержит наш триггер, при нажатии на который у нас будет появляться наше модальное окно.
Если наш сайт длинный и у нас появляется ползунок прокрутки — мы получаем его длину и записываем в scrollbarWidth. Давайте тут поподробнее. Мы изначально получаем ширину видимой части сайта через свойство clientWidth. Ширина ползунка прокрутки — разность между шириной окна внутри и шириной отображаемого содержимого (то, что под ползунком — не является отображаемым содержимым). Для корректности мы преобразовываем полученные значения через функции parseInt.
Далее мы привязываем необходимые элементы к переменным в соответствии с названием их классов, для тега body мы используем метод getElementsByTagName с указанием индекса получаемого элемента, то есть [0]. Смысл такой же, как и при getElementsByClassName. Я заметил простую вещь — если читаешь название методов, то понимаешь что они тебе дают :). В нашем случаем мы получаем множество элементов (окончание s в слове Elements), поэтому мы и работаем с массивом. А в методе getElementById мы получаем один элемент (о чем свидетельствует отсутствие окончания s в слове Element).
После инициализации рабочих переменных — мы корректируем положение body при появлении ползунка прокрутки, то есть наш ползунок будет накладываться поверх нашего сайта, а не сдвигать его, как это обычно бывает (можете проверить сами):
Механизм корректировки прост: в случае появления ползунка прокрутки — мы делаем отступ body через свойство margin-right на отрицательную величину ширины ползунка прокрутки. При первой загрузки страницы мы вызываем эту функцию, чтобы наше содержимое сразу же позиционировалось корректно, несмотря на наличие ползунка прокрутки. Вообще, позиционирование с учетом ползунка прокрутки — дело каждого, мне не хотелось бы, чтобы мой сайт скакал влево вправо 🙂
Создадим обработчик события нажатия на наш триггер:
И в завершение создадим обработчик закрытия нашего окна при нажатии на крестик или на область за модальным окном:
Вот и всё модальное окно. Если у Вас есть какие-нибудь замечания, похвала, критика, советы, любой фидбек — буду рад прочитать и внести корректировки! Всех обнял-приподнял 🙂
Всплывающее окно HTML и CSS при нажатии на кнопку + Примеры
Задача. Необходимы простые, несложные заготовки всплывающего окна на HTML (popup-окно, модальное окно).
Решение. Можно использовать несколько примеров, как на HTML и CSS, так и с использованием JavaScript.
Заготовка простого всплывающего popup-окна на HTML и CSS
Решение взято с itchief.ru
Всего нужно будет три блока кода:
- Содержание
- Содержание
- Содержание
- Содержание
Используем Код №1:
Заготовка в плагине для WordPress
Решение 2. Собрал простой плагин popup-окон для сайтов на WordPress. В нем всего 3 файла: .php — макет окон; .js — привязка к триггеру; .css — стили. Пример содержимого в Кодах 2.
Собственно, решил сделать кастомное решение в ситуации, когда кнопки-триггеры на карточке товаров подгружались уже после загрузки всего документа, Ajax-ом. Поэтому попап-формы реализуемые плагинами не срабатывали — скрипт плагина загрузился, собрал триггеры на странице, но нужных мне кнопок еще нет, они появятся при взамодействии пользователя с карточками товаров. А используя кастомное решение, можно в кнопку стригером вставить событие onfocus , которое будет запускать функцию привязки тригера к окну — onmouseover=»showModal(trigger, idForm)» .