Всплывающее окно с формой на CSS + JS
Так как они не теряют своей популярности, и всегда нужны под оригинальные функция, где при клике появляется полноценная страница, что и так можно сделать. Некоторые люди также называют это диалоговым окном, когда мы выходим из Facebook, появляется подтверждение, вы уверены, это называется модальное диалоговое окно.
Здесь задействовано jQuery для кнопки, где при нажатии кнопки появляется модальное окно, функция которого обрабатывается jQuery. Само появление происходит сверху, что даже неожиданно, ведь только нажимаете или делаете клик по кнопки, как резко самого верху спускается на большой скорости окно, где останавливается ровно по центру монитора или мобильного экрана.
Также некоторые другие основные модальные окна, такие как указатель даты, оповещение пользователей и многое другого, где подчеркиваю, что нужного для пользователя или самого веб разработчика.
В этом и заключается вся концепция, которой нечего объяснять, где остальные вещи, которые вы поймете после получения кодов. Для создания этого диалогового окна необходимо создать 3 файла, где первый для HTML, второй для CSS, и последний для JavaScript или jQuery.
Модальное окно, которое вы ждали. Или как вызвать «всплывашку» с разных кнопок на чистом JS
Установка
Установить такую «модалку» просто. Скачиваете js-файл и подключаете. Он не зависит от каких-то событий или библиотек, так что можете подключать где вам нужно. Вот ссылка на github
Инициализация
На той странице на которой вам нужно вызвать вы пишите в js:
Подробнее о пунктах в объекте
Есть 6 обязательных пунктов:
Немного о самом модальном окне
Я уже говорил, что основная задача, которую решает это модальное окно — это вызов с нескольких кнопок. Клик по нескольким кнопка для вызова js это типичный пример делегирования и в XMC (так я назвал своё модальное окно) оно реализовано так:
Соответственно и в конструкторе нужно прописать:
Кстати, в своё время, мне помогла с этим разобраться статья с learn javascript. Ознакомиться с ней будет полезным.
AJAX для формы
В моём «кейсе» необходимо было загружать форму по ajax (эта задача появилась в процессе). Благодаря моему изначальному подходу мне удалось сэкономить не мало времени. Я расширил через прототип.
Такой код запроса у меня был для CMS WordPress.
В итоге благодаря объектному подходу у меня получилось сделать не просто всплывающие окно, а почти web-приложение в котором у меня 2 ajax для получения формы и отправки, перевод в зависимости от браузера, чтение cookie, анимация загрузки. Благодаря этому же мне не пришлось искать новые элементы по различным селекторам для перевода или работы с данными формы, которая «прилетела» по ajax.
Надеюсь, что для вас будет полезна моя статья. Удачи!
Модальное окно на CSS + JS
Каждый начинающий веб-разработчик рано или поздно сталкивается с задачей, реализовать на сайте модальное окно (аналог pop-up окна).
Модальное окно полностью блокирует работу родительского сайта, пока пользователь не закроет данное окно. Как вы понимаете, что для навязывания такого действия, содержимое модального окна, должно представлять пользу для пользователя.
Желательно отказаться от автоматически всплывающего модального окна, а предоставить пользователю только кнопку, открывающую окно и хорошо видимый элемент (обычно это крестик), закрывающий окно. Этот способ, мы сегодня и реализуем в данной статье.
Демонстрация модального окна.
Мы сделаем адаптивное модальное окно без плагинов и библиотек, на чистом CSS+JS.
HTML разметка
Создадим кнопку, при клике на которую, будет открываться модальное окно.
Оболочка окна с затемнением, внутри которого, будет окно поменьше с содержимым. Затемнение самого сайта, подсказывает пользователю, что сначала следует заняться окном.
Содержимое модального окна, состоящее из хедера, тела и футера.
Шапка модального окна
Напишите здесь что-нибудь важное
Добавьте что-нибудь менее важное.
Футер
CSS код
Оформление полноэкранного фона модального окна.
.modal <
display: none; /* Скрыто по умолчанию */
background-color: rgb(0,0,0); /* Затемнение фона */
background-color: rgba(0,0,0,0.5); /* Полупрозрачное затемнение */
z-index: 1; /* Фон на нижнем слое */
overflow: auto; /* При необходимости, то появиться прокрутка */
>
Модальное окно с содержанием, к которому примениться анимация.
.modal-content <
animation-name: animate;
animation-duration: 0.5s
>
Добавим анимации для плавного скольжения сверху вниз и постепенного появления модального окна.
Стилизуем крестик (сущность ×), при клике по которому, модальное окно закроется.
.close <
font-size: 30px;
font-weight: bold;
>
JS код
Без JavaScript, не будет открываться и закрываться модальное окно. Получаем все нужные элементы, участвующие в процессе.
Получить модальное окно по ID.
var modal = document.getElementById(‘myModal’);
Получить кнопку, которая открывает модальное окно по ID.
var btn = document.getElementById(«myBtn»);
Получить тег span с классом close, который закрывает модальное окно.
var span = document.getElementsByClassName(«close»)[0];
Функции открыть / закрыть при клике.
Когда пользователь кликает по кнопке, модальное окно открывается – переходит из скрытного состояния в видимое.
btn.onclick = function() <
modal.style.display = «block»;
>
Когда пользователь кликает на крестик в теге span, модальное окно закрывается, наоборот переходит из видимого состояния в скрытное.
span.onclick = function() <
modal.style.display = «none»;
>
Когда пользователь кликает где-то за пределами модального окна, оно закрывается, становиться невидимым.
window.onclick = function(event) <
if (event.target == modal) <
modal.style.display = «none»;
>
>
Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».
На CodePen вы можете увидеть весь код модального окна на CSS+JS, который можно скачать и использовать в своих проекта.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Модальное окно для сайта на чистом CSS и JavaScript
В этой статье познакомимся со скриптом, предназначенным для динамического создания модальных окон на сайте. Разберём из чего он состоит, как его подключить и использовать.
Что такое модальное окно
При этом показ окна обычно сопровождают затемнением всей другой части страницы. Это действие позволяет визуально отделить его от остального содержимого страницы, а также показать, что в данный момент только оно одно является активным элементом. При этом контент, расположенный под ним, делают недоступным (т.е. пользователь не сможет с ним взаимодействовать пока он не закроет это окно).
Вызов модального окна можно привязать к различным событиям на странице, но в большинстве сценариев это осуществляют при нажатии на кнопку или ссылку.
Изображение модального окна:
Оно состоит из заголовка (хедера), основной части и футера.
В заголовке обычно выводят название окна и элемент, с помощью которого его можно закрыть. В основной части распологают содержимое, а в футере кнопки для выполнения различных действий.
Загрузка и установка модального окна
Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.
Процесс установки модального окна на страницу выполняется посредством подключения к ней его CSS и JavaScript файлов, или добавления их содержимого в соответствующие свои файлы.
Как создать и вызвать модальное окно
При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).
Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:
Пример создания модального окна с настройками по умолчанию:
Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».
В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:
Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.
Рассмотрим, как работать с этими методами на примерах.
Например, метод show используется когда вам необходимо показать (открыть) модальное окно:
Метод hide применяется для его скрытия:
Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.
Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.
Примеры использования скрипта для создания модальных окон
1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.
2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle=»modal» ):
3. Пример, в котором заголовок и содержимое модального окна определяется посредством значений data-атрибутов элемента, с помощью которого оно вызывается:
4. В этом примере показано как можно в обработчике события «click» для кнопки, расположенной в футере модального окна, получить элемент, посредством которого оно было открыто:
5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:
6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:
Пример содержимого файла «json-1»:
7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:
Описание скрипта модального окна
В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.
Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).
Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.
Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.
Делаем модальные окна для сайта. Заботимся об удобстве и доступности
Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.
Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.
В итоге было задумано сделать собственное простое решение.
Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:
(в статье не рассматриваем решения на базе Frontend-фреймворков)
Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.
Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».
Итак, чтобы нам хотелось видеть?
Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.
1. Разметка HTML и CSS
1.1. Каркас модальных окон
Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.
Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):