Меню

Вывести модальное окно javascript

Модальные окошки на голом JavaScript

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

Давайте решим, что нам нужно будет сделать:

  • Создать блокирующий фон
  • Определиться с позицией
  • Показать диалоговое окно
  • Закрыть диалоговое окно

Создадим объект modalWindow в JavaScript, который будет иметь два свойства. По умолчанию они ничему не равны.
_block — содержит HTML-элементы блокирующего фона
_win — содержит HTML-элементы диалогового окна

Теперь немного о методах объекта modalWindow:
initBlock() — инициализация и появление блокирующего фона
initWin(width, html) — инициализация диалогового окна, где width — ширина модального окна и html — html-текст, располагаемый в нашем окне
close() — закрыть модальное окно
show() — показать модальное окно

Наш принцип инициализации двух элементов — создать, если не был создан. В противном случае просто показать.

Приступим к написанию кода:

Теперь идем по порядку… Метод инициализации блокирующего фона:

Метод инициализации диалогового окна:

Метод закрытия модального окна:

Метод появления модльного окна:

Теперь зададим стили для нашего блокирующего фона и диалогового окна в CSS:

Теперь дописываем к нужному элементу событие onclick

Источник

Модальное окно на 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»;
>
>

Читайте также:  Как вывести дату поста wordpress

Свободное владение языком JavaScript, делает создание web-страниц – не скучным процессом, вы можете сами в этом убедиться, посмотрев мой видеокурс «JavaScript, jQuery и Ajax с Нуля до Гуру».

На CodePen вы можете увидеть весь код модального окна на CSS+JS, который можно скачать и использовать в своих проекта.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Источник

    Модальное окно для сайта на чистом CSS и JavaScript

    В этой статье познакомимся со скриптом, предназначенным для динамического создания модальных окон на сайте. Разберём из чего он состоит, как его подключить и использовать.

    Что такое модальное окно

    Модальное окно – это элемент интерфейса, которой визуально представляет собой «всплывающее окно», отображающееся над остальной частью страницы .

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

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

    Изображение модального окна:

    Оно состоит из заголовка (хедера), основной части и футера.

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

    Загрузка и установка модального окна

    Проект модального окна расположен на GitHub. Перейти к нему можно по этой ссылке.

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

    Как создать и вызвать модальное окно

    Эта реализация модального окна не требует непосредственного размещения его HTML кода на странице . Это выполняется программно.

    Таким образом, для того чтобы создать его достаточно просто вызвать функцию $modal :

    При создании окна вы можете сразу же его настроить, для этого в данную функцию необходимо передать данные в формате объекта. Осуществляется это с помощью соответствующих ключей (свойств). Например, с помощью ключа title вы можете задать заголовок, который будет иметь всплывающее окно по умолчанию. Ключ content позволяет установить содержимое, а footerButtons – кнопки для отображения их в его нижней части (футере).

    Все эти ключи являются не обязательными . Если не указать title , то заголовок будет иметь название «Новое окно» . Если не установить значению ключу content , то модальное окно в этом случае создатся с пустым содержимым.

    Ключ footerButtons в отличие от title и content принимает в качестве значения массив объектов . Каждый объект в этом массиве представляет собой кнопку . Она задаётся с помощью ключей text , class , handler . С помощью них вы можете установить кнопке (элементу ) текст, значение атрибутов class и data-handler . Если ключ footerButtons вообще не указать, то в этом случае модальное окно будет создано без футера.

    Читайте также:  Вывести химические формулы с индексом

    Пример кода, выполняющего создание модального окна без кнопок в нижней части, с заголовком «Новое сообщение» и пустым содержимым:

    Пример создания модального окна с настройками по умолчанию:

    Этот код создаст модальное окно без футера, с пустым содержимым и заголовком «Новое окно».

    Но функция $modal не только создаёт модальное окно в DOM, но также предоставляет методы для управления им.

    Для этого нужно создать переменную и присвоить ей результат выполнения функции $modal .

    В эту созданную переменную будет помещён объект (а точнее ссылка на него), имеющий следующие методы:

    • show – для отображения модального окна;
    • hide – для скрытия модального окна;
    • destroy – для удаления модального окна из DOM и связанных с ним обработчиков событий;
    • setContent – для установки контента;
    • setTitle – для установки заголовка.

    Эти методы предназначены для взаимодействия с созданным окном. Они позволяют его открыть, закрыть, изменить ему контент и др.

    Рассмотрим, как работать с этими методами на примерах.

    Например, метод show используется когда вам необходимо показать (открыть) модальное окно:

    Метод hide применяется для его скрытия:

    Методы setContent и setTitle предназначены соответственно для изменения контента и заголовка модального окна после его создания.

    В возвращаемом объекте также есть метод destroy . Его необходимо использовать только когда вам необходимо полностью удалить модальное окно из DOM, а также связанные с ним события:

    Данную операцию имеет смысл использовать только в том случае, если созданное модальное окно вам больше не нужно на странице.

    Примеры использования скрипта для создания модальных окон

    1. Пример кода, выполняющий открытие модального окна при нажатии на определённую кнопку.

    2. Пример кода, позволяющий открыть одно и тоже модальное окно посредством клика на разные элементы (определяется элемент, который может открыть это окно, с помощью наличия у него атрибута data-toggle=»modal» ):

    3. Пример, в котором заголовок и содержимое модального окна определяется посредством значений data-атрибутов элемента, с помощью которого оно вызывается:

    4. В этом примере показано как можно в обработчике события «click» для кнопки, расположенной в футере модального окна, получить элемент, посредством которого оно было открыто:

    5. Пример, в котором создано 2 разных модальных окна. Первое модальное окно открывается при нажатии на одни элементы, а второе – при клике на другие:

    6. Пример всплывающего окна, данные в которое загружаются с использованием AJAX:

    Пример содержимого файла «json-1»:

    7. Этот пример содержит код для обработки различных событий, связанных с модальном окном и кнопками, расположенными в нём:

    Описание скрипта модального окна

    В этом разделе приведена информация для тех, кто хочет более подробно разобраться с тем, как работает это модальное окно.

    Её JavaScript код представлен посредством функции $modal :

    В качестве результата эта функция возвращает объект, состоящий из 5 методов. Они позволяют нам выполнять различные действия над созданным модальным окном. Назначение каждого метода, а также различные примеры как их использовать мы уже подробно рассмотрели выше. Здесь мы более подробно разберём внутренние переменные и функции $modal .

    В $modal имеются следующие переменные _elemModal , _eventShowModal , _eventHideModal , _hiding , _destroyed , _animationSpeed и функции _createModal , _showModal , _hideModal , _handlerCloseModal .

    Функция _createModal предназначена для формирования HTML-кода модального окна (DOM структуры) и добавления её на страницу. В качестве результата она возвращает ссылку на базовый элемент этого модального окна. Т.к. нам эта ссылка нужна в других частях $modal , то сохраним её в переменную _elemModal :

    Читайте также:  Вывести список значений второго параметра без повторов

    Переменные _eventShowModal и _eventHideModal применяются для хранения созданных нами кастомных событий «show.modal» и «hide.modal». Событие «show.modal» мы будем вызывать при открытии модального окна, а «hide.modal» – при закрытии. Эти события будем генерировать для объекта document . Используя их, вы можете очень просто добавить свою логику при открытии и закрытии модального окна:

    Переменные _hiding и _destroyed используются для хранения состояний. Первая применяется для индикации процесса скрытия модального окна. Она имеет значение true во время скрытия окна, в остальных моментах — false . Вторая переменная хранит true или false , в зависимости от того, удалены ли DOM элементы модального окна со страницы и связанные с ним события или нет.

    Переменная _animationSpeed используется для указания времени длительности процесса скрытия модального окна (в миллисекундах).

    Функция _showModal предназначена для включения отображения модального окна на странице, а _hideModal – для его скрытия.

    Функция _handlerCloseModal используется в качестве обработчика события «click» для документа и выполняет скрытие модального окна при нажатии на кнопку его закрытия или вне его.

    Источник

    Делаем модальные окна для сайта. Заботимся об удобстве и доступности

    Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.

    Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.

    В итоге было задумано сделать собственное простое решение.

    Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:

    • Arctic Modal,
    • jquery-modal,
    • iziModal,
    • Micromodal.js,
    • tingle.js,
    • Bootstrap Modal (из библиотеки Bootstrap) и др.

    (в статье не рассматриваем решения на базе Frontend-фреймворков)

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

    Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».

    Итак, чтобы нам хотелось видеть?

    • Окна должны открываться как можно быстрее, без тормозов браузера, с возможностью анимировать открытие и закрытие.
    • Под окном должен быть оверлей. Клик/тап по оверлею должен закрывать окно.
    • Страница под окном не должна прокручиваться.
    • Окон может быть несколько. Открытие одного определенного окна должно осуществляться кликом на любой элемент страницы с data-атрибутом, который мы выберем.
    • Окно может быть длинным – прокручиваемым.
    • Желательно поработать над доступностью, а также с переносом фокуса внутрь окна и обратно.
    • Должно работать на IE11+

    Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.

    Начнём с разметки.

    1. Разметка HTML и CSS

    1.1. Каркас модальных окон

    Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.

    Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):

    Источник