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

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

Узнать, как создать модальное окно с помощью 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

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

Исходный 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"; > 

Модальное окно на чистом CSS и JS

Всем привет! Я в веб-разработке не так давно. Сейчас я пишу свой сайт, который будет выступать в качестве моего портфолио и, возможно, даже целого проекта. При добавлении модального окна для авторизации на свой сайт, я подумал, а что будет, если публиковать подобные модульные вещи, чтобы любой человек мог их скопировать и не думать о них, а использовать в разработке. То есть создать готовый модуль для встраивания. Мне, как разработчику было бы удобно использовать готовое решение, тем более написанное мною, да и делиться опытом — дело приятное 🙂

NB

сам сайт скрыт для сохранения интеллектуальной собственности 🙂

А теперь пошаговое создание:

Здесь представлена несложная разметка для модального окна.

Перед разъяснением элементов и их стилей, мы укажем скрытие ползунка прокрутки для body, которое нам будет мешать:

/* убираем нижний ползунок прокрутки */ body

Давайте поясню, что есть что:

• modalBackground — это фон, расположенный за модальным окном. Через него мы будем видеть наш сайт < background: rgba(0, 0, 0, 0.8); >, в то время как основной фокус будет на модальном окне. Для корректного расположения, чтобы наш фон покрывал весь сайт — мы делаем его с положением < position: fixed >и размерами на весь экран < width: 100%; height : 100%; >. А для наложения поверх других окон или элементов сайта — < z-index: 1 >. Стоит отметить, что изначально мы не можем видеть наше окно < display: none >. Для отображения возможности нажатия на фон — делаем указатель через

/* фон нашего модального окна */ .modalBackground < display: none; background: rgba(0, 0, 0, 0.8); position: fixed; width: 100%; height: 100%; cursor: pointer; /* указываем z-индекс для корректного наслаивания */ z-index: 1; >

• modalActive — непосредственно наше модальное окно. Его размеры < width: 350px; height : 495px; >я подбирал исходя из удобства верстки для маленьких экранов, так что размеры можно указать свои. Мы позиционируем наше модальное окно по центру < position: absolute; top: calc(50% - 250px); left: calc(50% - 175px); >. Делаем рамки закругления в 10 пикселей < border-radius: 10px >. Курсор для удобства делаем стандартным < cursor: default >. Свойства background-color и padding в данном случае ни на что не влияют, они используются для фона нашего окошечка внутри и для внутренних отступов нашего окошечка соответственно. Поэтому их можно ставить на свой вкус и цвет 🙂

/* позиционирование самого модального окна */ .modalActive

• modalClose — это наш крестик. Я использовал два варианта выхода из модального окна, кому как удобнее — через нажатие на фон, либо через нажатие на крестик (этот вариант предпочтительнее для мобильных устройств из-за маленького экрана, по сравнению с монитором ноутбука/компьютера/планшета). Для крестика соответственно используется тег modalCross с указанием в img пути к картинке-крестика. Свойство font-family используется для выбора семейства шрифта, здесь оно не играет роли (на ваш вкус и цвет).

/* кнопочка закрытия модального окна */ .modalClose < font-family: var(--font-regular); position: absolute; right: 5px; top: 5px; width: 30px; height: 30px; cursor: pointer; >/* сама картинка кнопочки закрытия */ .modalClose img

• modalWindow — внутри него располагается содержимое нашего окна, для удобной верстки внутреннего содержимого устанавливаем относительное позиционирование относительно нашего модального окна < position: relative >. Какое оно будет — зависит только от вас 🙂

/* делаем позиционирование внутренних элементов относительно модального окна */ .modalWindow

Теперь приступим к части оживления нашего окна с помощью жабаскрипта JS !

Прежде всего нам надо получить все элементы, с которыми нам предстоит работать:

// устанавливаем триггер для модального окна (название можно изменить) const modalTrigger = document.getElementsByClassName("trigger")[0]; // получаем ширину отображенного содержимого и толщину ползунка прокрутки const windowInnerWidth = document.documentElement.clientWidth; const scrollbarWidth = parseInt(window.innerWidth) - parseInt(document.documentElement.clientWidth); // привязываем необходимые элементы const bodyElementHTML = document.getElementsByTagName("body")[0]; const modalBackground = document.getElementsByClassName("modalBackground")[0]; const modalClose = document.getElementsByClassName("modalClose")[0]; const modalActive = document.getElementsByClassName("modalActive")[0];

Стоит отметить, что при использовании метода getElementsByClassName мы будем получать массив всех элементов. Поэтому для корректного обращения к конкретному элементу — мы указываем индекс получаемого элемента. А так как наши массивы состоят из одного элемента — индекс во всех случаях равен [0].

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

Если наш сайт длинный и у нас появляется ползунок прокрутки — мы получаем его длину и записываем в scrollbarWidth. Давайте тут поподробнее. Мы изначально получаем ширину видимой части сайта через свойство clientWidth. Ширина ползунка прокрутки — разность между шириной окна внутри и шириной отображаемого содержимого (то, что под ползунком — не является отображаемым содержимым). Для корректности мы преобразовываем полученные значения через функции parseInt.

Далее мы привязываем необходимые элементы к переменным в соответствии с названием их классов, для тега body мы используем метод getElementsByTagName с указанием индекса получаемого элемента, то есть [0]. Смысл такой же, как и при getElementsByClassName. Я заметил простую вещь — если читаешь название методов, то понимаешь что они тебе дают :). В нашем случаем мы получаем множество элементов (окончание s в слове Elements), поэтому мы и работаем с массивом. А в методе getElementById мы получаем один элемент (о чем свидетельствует отсутствие окончания s в слове Element).

После инициализации рабочих переменных — мы корректируем положение body при появлении ползунка прокрутки, то есть наш ползунок будет накладываться поверх нашего сайта, а не сдвигать его, как это обычно бывает (можете проверить сами):

// функция для корректировки положения body при появлении ползунка прокрутки function bodyMargin() < bodyElementHTML.style.marginRight = "-" + scrollbarWidth + "px"; >// при длинной странице - корректируем сразу bodyMargin();

Механизм корректировки прост: в случае появления ползунка прокрутки — мы делаем отступ body через свойство margin-right на отрицательную величину ширины ползунка прокрутки. При первой загрузки страницы мы вызываем эту функцию, чтобы наше содержимое сразу же позиционировалось корректно, несмотря на наличие ползунка прокрутки. Вообще, позиционирование с учетом ползунка прокрутки — дело каждого, мне не хотелось бы, чтобы мой сайт скакал влево вправо 🙂

Создадим обработчик события нажатия на наш триггер:

// событие нажатия на триггер открытия модального окна modalTrigger.addEventListener("click", function () < // делаем модальное окно видимым modalBackground.style.display = "block"; // если размер экрана больше 1366 пикселей (т.е. на мониторе может появиться ползунок) if (windowInnerWidth >= 1366) < bodyMargin(); >// позиционируем наше окно по середине, где 175 - половина ширины модального окна modalActive.style.left = "calc(50% - " + (175 - scrollbarWidth / 2) + "px)"; >);

И в завершение создадим обработчик закрытия нашего окна при нажатии на крестик или на область за модальным окном:

// нажатие на крестик закрытия модального окна modalClose.addEventListener("click", function () < modalBackground.style.display = "none"; if (windowInnerWidth >= 1366) < bodyMargin(); >>); // закрытие модального окна на зону вне окна, т.е. на фон modalBackground.addEventListener("click", function (event) < if (event.target === modalBackground) < modalBackground.style.display = "none"; if (windowInnerWidth >= 1366) < bodyMargin(); >> >);

Вот и всё модальное окно. Если у Вас есть какие-нибудь замечания, похвала, критика, советы, любой фидбек — буду рад прочитать и внести корректировки! Всех обнял-приподнял 🙂

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

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

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

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

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

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

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

Подключение CSS и JavaScript-файлов к странице

Исходные коды модального окна расположены на GitHub в рамках проекта ui-components в папке modal .

Для установки модального окна на страницу необходимо подключить к ней файлы:

• CSS: modal.css ;
• JavaScript: modal.js .

Создание и настройка модального окна

Этот скрипт создаёт модальное окно динамически. То есть здесь не нужно вставлять какой-то HTML-код непосредственно на страницу. Реализовано это в коде через класс. Шаблон модального окна содержится в приватном свойстве #template :

JavaScript

class ItcModal { #template = '
{{title}}
×
{{content}}
{{footer}}
'; // . }

Следовательно, для того, чтобы сделать модальное окно достаточно просто создать новый экземпляр класса ItcModal :

JavaScript

const modal = new ItcModal();

При создании окна вы можете сразу же его настроить, для этого в ItcModal необходимо передать аргумент в формате объекта:

JavaScript

const modal = new ItcModal({ title: 'Заголовок', content: '
Содержимое модального окна.
 ', footerButtons: [ { class: 'btn btn-close', text: 'Закрыть', action: 'close' }, ] });

Ключ title отвечает за заголовок, content – за содержимое, footerButtons – за кнопки в футере окна.

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

JavaScript

const modal = new ItcModal();

Пример создания модального окна с заголовком «Какой-то текст» и содержимым

Мой контент

:
JavaScript

const modal = new ItcModal({ title: 'Какой-то текст', content: '
Мой контент
' });

В качестве содержимого можно передавать HTML-код.

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

JavaScript

const modal = new ItcModal({ title: '. ', content: '
.
 ', footerButtons: [ { class: 'btn btn-cancel', text: 'Отмена', action: 'cancel' }, { class: 'btn btn-ok', text: 'ОК', action: 'ok' } ] });

Методы

Управление созданным модальным окном осуществляется посредством методов:

• show – открытие;
• hide – закрытие;
• dispose – удаление из DOM HTML-элементов модального окна и обработчика события click ;
• setBody – установка основного содержимого;
• setTitle – изменение заголовка.

Открытие модального окна:

JavaScript

const modal = new ItcModal(); // открыть модальное окно modal.show();

Скрытие модального окна:

JavaScript

modal.hide();

Изменение заголовка и тела модального окна:

JavaScript

// новый заголовок modal.setTitle('Текст нового заголовка'); // новое тело modal.setBody('
.
 ');

Уничтожение модального окна:

JavaScript

modal.dispose();

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

События

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

JavaScript

// при открытии модального окна document.addEventListener('show.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно e.target.querySelector('.itc-modal-body').innerHTML = 'Содержимое модального окна, добавленное через show.itc.modal. '; }); // при закрытии модального окна document.addEventListener('hide.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно e.target.querySelector('.itc-modal-body').innerHTML = ''; });

Примеры

1. Открытие модального окна при нажатии на кнопку:

Открыть  

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

Кнопка 1 Кнопка 2  

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

Кнопка 1 Кнопка 2  

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

 
 
 
 .
  

5. Создание 2 разных модальных окон. Первое модальное окно открывается при нажатии на кнопки с data-атрибутом data-toggle=»modal-1″ , а второе – при клике на data-toggle=»modal-2″ :

Открыть окно 1 Открыть окно 1 Открыть окно 2 Открыть окно 2  

6. Загрузка данных в модальное окно посредством AJAX:

из json-1 из json-2 .  

{"title":"Audi A5 Coupé","price":"22500$","image":"https://itchief.ru/examples/images/car-1.jpg"}

7. Работа с событиями, возникающими при открытии и закрытии модального окна:

 Кнопка 1 Кнопка 2  

Внутреннее устройство модального окна

Код JavaScript модального окна представлен посредством класса ItcModal :

JavaScript

class ItcModal { #elem; #template = '
{{title}}
×
{{content}}
{{footer}}
'; #templateFooter = '
{{buttons}}
'; #templateBtn = '{{text}}'; #eventShowModal = new Event('show.itc.modal'); #eventHideModal = new Event('hide.itc.modal'); #disposed = false; constructor(options = []) { // . } #handlerCloseModal(e) { // . } show() { // . } hide() { // . } dispose() { // . } setBody(html) { // . } setTitle(text) { // . } };

В конструкторе мы создаём DOM-элемент и формируем его HTML-структуру. Ссылку на созданный элемент мы помещаем в приватное свойство #elem . Данное свойство мы будем использовать в других методах ItcModal . Для вставки на страницу модального окна используется метод append .

Приватное свойство #disposed применяется для хранения состояния. По умолчанию оно имеет значение false . Это свойство связано с методом dispose() . При вызове этого метода, модальное окно удаляется со страницы. Но, кроме этого, также удаляется событие, связанное с ним. Для отметки этого действия, свойству #dispose присваивается значение true :

JavaScript

dispose() { this.#elem.remove(this.#elem); this.#elem.removeEventListener('click', this.#handlerCloseModal); this.#disposed = true; }

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

JavaScript

show() { if (this.#disposed) { // если модальное окно удалено, то завершаем работу return; } this.#elem.classList.add('itc-modal-show'); this.#elem.dispatchEvent(this.#eventShowModal); }

При открытии и закрытии модального окна, код генерирует события show.itc.modal и hide.itc.modal с помощью метода dispatchEvent . Сами события находятся в приватных свойствах #eventShowModal и #eventHideModal . Эти события вызываются для this.#elem . Используя их, вы можете очень просто добавить нужную логику при открытии и закрытии модального окна:

JavaScript

document.addEventListener('show.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно // . }); document.addEventListener('hide.itc.modal', (e) => { // e.target - содержит ссылку на модальное окно // . });

Приватный метод #handlerCloseModal является обработчиком события click и используется для закрытия модального окна. То есть он выполняется при нажатии на крестик или при клике на backdrop . Это действие мы вынесли в отдельный метод для того, чтобы потом мы могли удалить его при вызове метода dispose .