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

Question

[Виктор Евгеньев]

Добрый день.

У меня есть страница. Бэкэнд - laravel, фронтенд - js, почти ванильный. На странице - список заказов. У каждого заказа есть кнопка, по нажатию на которую необходимо вывести модальное окно-форму, которая будет отправлять запрос на адрес вида "orders/{id}", где id зависит от конкретной кнопки. Кроме того, в форму подставляются данные от конкретного заказа в скрытые и текстовые поля.
Каким образом можно реализовать подобный функционал с использованием лишь одного модального окна, без дублирования модалок для каждого отдельного заказа?

UPD: на текущую секунду использую micromodal.js. Полагаю, что требуется использовать дата-аттрибуты. Но не уверен в этом.

Answer 1

[Максим Тимофеев]

А в чем проблема? Просто кнопка открытия модалки должна содержать достаточную информацию для формирования контента модалки. В Вашем случае, видимо, это url где ajax-ом забрать контент.

Comments

[Виктор Евгеньев]

Не подходит данный вариант. Я думал использовать дата-аттрибуты, но их слишком много и я не видел ни одной библиотеки, которая открывала бы модальные окна с использованием дополнительных дата-аттрибутов. На текущую секунду использую micromodal.js

[Максим Тимофеев]

Виктор Евгеньев, 12 строк кода, зачем искать сторонние? Слушаем событие открытия модалки, читаем data аттрибут кнопки, в нем url с параметрами, отправляет ajax, получаем html, вставляем в модалку.

думал использовать дата-аттрибуты, но их слишком много

это какие? На мой взгляд их 2, например:

data-toggle="my-the-one-modal"
data-content="/some/url/get-some-content?id=12&pivo=budu"

Первый, что бы по клику открыть модалку, второй что бы знать где взять контент

[Сергей delphinpro]

Виктор Евгеньев,
1. Зачем вам много атрибутов, когда достаточно только id? Есть идентификатор — делаем запрос и получаем остальную информацию (или сразу готовый html содержимого окна).
2. В любой нормальной реализации модальных окон есть система событий. В частности в вашей библиотеке при открытии окна генерится событие onShow() в котором вы можете совершить любые манипуляции с содержимым окна.

Answer 2

[kkuznecov72]

HTML и CSS код модального окна
HTML разметка модального окна:




Название
×


Содержимое модального окна...




Ссылка, с помощью которой осуществляется открытие модального окна:

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

CSS модального окна:
/* стилизация содержимого страницы */
body {
font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: #292b2c;
background-color: #fff;
}

/* свойства модального окна по умолчанию */
.modal {
position: fixed; /* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.5); /* цвет фона */
z-index: 1050;
opacity: 0; /* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 200ms ease-in;
-moz-transition: opacity 200ms ease-in;
transition: opacity 200ms ease-in; /* анимация перехода */
pointer-events: none; /* элемент невидим для событий мыши */
margin: 0;
padding: 0;
}
/* при отображении модального окно */
.modal:target {
opacity: 1; /* делаем окно видимым */
pointer-events: auto; /* элемент видим для событий мыши */
overflow-y: auto; /* добавляем прокрутку по y, когда элемент не помещается на страницу */
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto; /* для отображения модального окна по центру */
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: .3rem;
outline: 0;
}
media (min-width: 768px) {
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
}
/* свойства для заголовка модального окна */
.modal-header {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
border-bottom: 1px solid #eceeef;
}
.modal-title {
margin-top: 0;
margin-bottom: 0;
line-height: 1.5;
font-size: 1.25rem;
font-weight: 500;
}
/* свойства для кнопки "Закрыть" */
.close {
float: right;
font-family: sans-serif;
font-size: 24px;
font-weight: 700;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
opacity: .5;
text-decoration: none;
}
/* свойства для кнопки "Закрыть" при нахождении её в фокусе или наведении */
.close:focus, .close:hover {
color: #000;
text-decoration: none;
cursor: pointer;
opacity: .75;
}
/* свойства для блока, содержащего основное содержимое окна */
.modal-body {
position: relative;
-webkit-box-flex: 1;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding: 15px;
overflow: auto;
}