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

Как сделать модальное окно javascript

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

Исходный HTML файл и стили

  onclick="openModal();">Открыть  class="modal">  class="modal-content"> Здесь может быть ваша реклама.  onclick="closeModal();">&times    

/* формируем фон для модального окна */ .modal  display: none; /* скрыт по умолчанию */ /* темный фон при открытии модалки должен быть на всю страницу */ position: fixed; z-index: 1; /* поверх всех элементов */ left: 0; top: 0; width: 100vw; /* полная ширина */ height: 100vh; /* полная высота */ background-color: rgba(0,0,0,0.4); /* цвет фона - прозрачный черный */ > /* само модальное окно с контентом */ .modal-content  background-color: #fff; /* окно будет находится по центру по горизонтали и с отступом сверху в 100 px */ margin: 100px auto; padding: 20px; width: 50%; font-size: 20px; /* разнесем текст и кнопоку по краям окна */ display: flex; justify-content: space-between; > span  cursor: pointer; > 

Логика работы проста, нам нужно что бы при нажатии на кнопку «открыть» на странице, менялось свойство display у класса modal с none на block, и обратно, при нажатии на кнопку закрыть в самом окне. Данный код необходимо добавить в раздел на странице

const modal = document.getElementsByClassName("modal")[0]; const openModal = () =>  modal.stylе.displаy = "block"; > const closeModal = () =>  modal.stylе.displаy = "none"; > 

Пишем JavaScript

В начале, повесим на document событие DOMContentLoaded. Это событие сработает когда страница будет загружена.

document.addEventListener('DOMContentLoaded', function() >);

Затем запишем массив кнопок в переменную используя метод querySelector. Здесь же определим еще 2 переменные: элемент подложки и массив кнопок-крестиков.

document.addEventListener('DOMContentLoaded', function()  var modalButtons = document.querySelectorAll('.js-open-modal'), 
overlay = document.querySelector('#overlay-modal'), 
closeButtons = document.querySelectorAll('.js-modal-close');
>);

Заметьте, modalButtons и CloseButtons мы получаем через querySelectorAll, который возвращает массив, мы сделали это потому что нужно обрабатывать клики по всем кнопка, а вот overlay мы получаем через querySelector, он возвращает один элемент.

В html добавим кнопкам классы .js-open-modal. Мы специально будем использовать новый класс с приставкой js, чтобы не путать стили и интерактивность. Все кто будет работать с кодом увидит, что у класса есть приставка js, значит этот класс используется для интерактивности и его лучше не трогать.

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

/* Перебираем массив кнопок */
modalButtons.forEach(function(item)>);

В переменной item у нас будет храниться текущий элемент цикла. Повесим обработчик на него:

/* Перебираем массив кнопок */
modalButtons.forEach(function(item) /* Назначаем каждой кнопке обработчик клика */ 
item.addEventListener('click', function(event)  >);
>);

event или e — объект текущего события. В этом объекте хранятся различные методы и данные. При вызове любого события указание аргумента у функции будет ссылаться на этот объект. Зачем нам нужен этот объект? Об этом чуть ниже.

Что нам нужно сделать теперь?

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

Для этого в объекте события есть метод, который предотвращает стандартное действие элемента.

event.preventDefault();

С предотвращением вопрос решили.

У каждой кнопки есть атрибут data-modal, в нем хранится значение, которое находится у модального окна в таком же атрибуте. Наши действия:

1. Получить значение атрибута текущей кнопки
2. Найти модальное окно с помощью этого значения

var modalId = this.getAttribute('data-modal'), 
modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]');

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

В итоге получается такой селектор — ‘.modal=[data-modal=”значение переменной”]’ , который и находит наше модальное окно.

Давайте добавим нашему окну и подложке класс active.

modalElem.classList.add('active');
overlay.classList.add('active');

Напишем стили для классов .active:

.modal.active,
.overlay.active opacity: 1; 
visibility: visible;
>

Весь javascript код который получился:

document.addEventListener('DOMContentLoaded', function()  var modalButtons = document.querySelectorAll('.js-open-modal'), 
overlay = document.querySelector('#overlay-modal'), 
closeButtons = document.querySelector('.js-modal-close'); 
 
 
modalButtons.forEach(function(item)  
item.addEventListener('click', function(e)  
e.preventDefault(); var modalId = this.getAttribute('data-modal'), 
modalElem = document.querySelector('.modal[data-modal="' + modalId + '"]'); 
 
modalElem.classList.add('active'); 
overlay.classList.add('active'); >); // end click 
>); // end foreach
>); // end ready

Кнопки должны открывать то модальное окно, к которому привязаны. Проверяем:

Осталось написать закрытие окон по клику на крестик. С перебором элементов и созданием события вы уже знакомы.

closeButtons.forEach(function(item)  item.addEventListener('click', function(e)  >);>); // end foreach

При клике на крестик нам нужно у этого же элемента найти родителя или деда с классом .modal и удалить у него класс .active.

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

Для таких задач я не буду писать велосипед а воспользуюсь готовой микро-библиотекой closest. Код библиотеки:

!function(e)),"function"!=typeof e.closest&&(e.closest=function(e)return null>)>(window.Element.prototype);

Его нужно подключить в отдельном файле или в этом же файле до нашего кода.

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

В нашем случае мы должны найти родителя с классом .modal и не важно является ли он прямым предком или между них есть еще какие-то элементы.

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

closeButtons.forEach(function(item) item.addEventListener('click', function(e) console.log(this.closest('.modal')); 
>);>); // end foreach

При клике на крестик, код выполнился и мы увидели в консоли родителя или деда нашего крестика, элемент с классом .modal. Теперь мы можем убрать у него активный класс, сразу же уберем его и у подложки.

closeButtons.forEach(function(item) item.addEventListener('click', function(e) var parentModal = this.closest('.modal'); parentModal.classList.remove('active'); 
overlay.classList.remove('active'); 
>);>); // end foreach

Теперь вы можете создавать много много модальных окон не изменяя свой js код.

Для многих операция jquery является громоздкой библиотекой. Вы можете использовать вместо этого микро-библиотеки. Сборник библиотек — http://microjs.com/.

Еще один полезный сайт который уже в названии говорит что jquery вам может быть и не нужен. http://youmightnotneedjquery.com/

Спасибо за прочтение статьи! Если материал был полезен для тебя — поставь лайк или напиши об этом в комментариях, это займет 1 минуту, это важно для меня. Спасибо!

Если у тебя есть замечания, пожелания, предложения — можешь так же написать их в комментариях. Я рад новым мнениям и критике.

Как сделать — Модальное окно

Узнать, как создать модальное окно с помощью CSS и JavaScript.

Создать модальное окно

Модаль — это диалоговое окно/всплывающее окно, которое отображается в верхней части текущей страницы:

Модальный заголовок

Модальный нижний колонтитул

Шаг 1) Добавить HTML:

Пример

class=»modal» is a container element for the modal and the div with class=»modal-content» is where you put your modal content (headings, paragraphs, images, etc).

The element with class=»close» should be used to close the modal.

Шаг 2) Добавить CSS:

Пример

/* Модальный (фон) */
.modal display: none; /* Скрыто по умолчанию */
position: fixed; /* Оставаться на месте */
z-index: 1; /* Сидеть на вершине */
left: 0;
top: 0;
width: 100%; /* Полная ширина */
height: 100%; /* Полная высота */
overflow: auto; /* Включите прокрутку, если это необходимо */
background-color: rgb(0,0,0); /* Цвет запасной вариант */
background-color: rgba(0,0,0,0.4); /* Черный с непрозрачностью */
>

/* Модальное содержание/коробка */
.modal-content background-color: #fefefe;
margin: 15% auto; /* 15% сверху и по центру */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Может быть больше или меньше, в зависимости от размера экрана */
>

/* Кнопка закрытия */
.close color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
>

.close:hover,
.close:focus color: black;
text-decoration: none;
cursor: pointer;
>

.modal class

The .modal class represents the window BEHIND the actual modal box. The height and width is set to 100%, which should create the illusion of a background window.

Добавить a black background color with opacity.

Set position to fixed; meaning it will move up and down the page when the user scrolls.

It is hidden by default, and should be shown with a click of a button (we’ll cover this later).

The .modal-content class

This is the actual modal box that gets focus. Do whatever you want with it. We have got you started with a border, some padding, and a background color. The margin: 15% auto is used to push the modal box down from the top (15%) and centering it (auto).

We also set the width to 400px — this could be more or less, depending on screen size. We will cover this later.

The .close class

The close button is styled with a large font-size, a specific color and floats to the right. We have also added some styles that will change the color of the close button when the user moves the mouse over it.

Шаг 3) Добавить JavaScript:

Пример

// Получить модальный
var modal = document.getElementById(«myModal»);

// Получить кнопку, которая открывает модальный
var btn = document.getElementById(«myBtn»);

// Получить элемент , который закрывает модальный
var span = document.getElementsByClassName(«close»)[0];

// Когда пользователь нажимает на кнопку, откройте модальный
btn.onclick = function() modal.style.display = «block»;
>

// Когда пользователь нажимает на (x), закройте модальное окно
span.onclick = function() modal.style.display = «none»;
>

// Когда пользователь щелкает в любом месте за пределами модального, закройте его
window.onclick = function(event) if (event.target == modal) modal.style.display = «none»;
>
>

Добавить верхний и нижний колонтитулы

Добавить класс для модального заголовка, модального тела и модального нижнего колонтитула:

Пример

Стиль модального заголовка, тела и нижнего колонтитула, а также добавить анимацию (слайд в модели):

Пример

/* Модальный заголовок */
.modal-header padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Модальное тело */
.modal-body

/* Модальный нижний колонтитул */
.modal-footer padding: 2px 16px;
background-color: #5cb85c;
color: white;
>

/* Модальное содержание */
.modal-content position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
animation-name: animatetop;
animation-duration: 0.4s
>

Нижний модальный («нижние листы»)

Пример того, как создать модальный режим полной ширины, который скользит снизу:

Пример

Совет:Кроме того, проверить Модальные изображения и Лайтбокс.

Делаем модальное окно на JavaScript

В современной разработке web сайтов часто нужно выводить всплывающее модальное окно для вывода той или иной информации. Это может быть форма для ввода данных, вывод реквизит, дополнительное описание чего-либо. Для анимационного вывода и удаления модального окна используется библиотека CSS, которую можно скачать по ссылке: animate.min.css

Текст в модальном окне

CSS код модального окна
HTML код модального окна
Инициализация JavaScript для работы модального окна:

Помогла ли вам статья?