Как передать данные в модальное окно

Как передать данные в модальное окно через children?

подскажите как организовать наполнение модального окна через chidlren. Наполнение данными будет происходить в компонентах First и Second. Модальное окно должно быть одно, подключается через портал. Modal должен быть абстрактным без привязки к компонентам.

const App = () => < const [modalData, setModalData] = useState(null) const [isModalActive, setIsModalActive] = useState(false) const openModal = (content) => < setModalData(content) setIsModalActive(true) >const closeModal = () => < setModalData(null) setIsModalActive(false) >return ( <>  <>  ) > const Modal = () => < return CreatePortal(( <>  ), document.body) >

• Вопрос задан 03 сент.
• 84 просмотра

6 комментариев

Простой 6 комментариев

Модальное окно

Используйте модальный JavaScript плагин Bootstrap для добавления диалоговых окнон на ваш сайт для лайтбоксов, уведомлений пользователей или полностью настраиваемого контента.

На этой странице На этой странице

Как это работает

До того как начать работу с модальными компонентами Bootstrap, ознакомьтесь со следующей информацией, т.к. параметры недавно изменились.

• Модальные окна сделаны на HTML, CSS и JavaScript. Они располагаются поверх всего документа и блокируют прокрутку тела документа , вместо него прокручивая модальные окна
• Клик вне модального элемента автоматически закрывает его.
• Bootstrap позволяет активировать лишь один модальный элемент за раз. Вложенные модальные элементы не поддерживаются, т.к. мы думаем, что они принесли бы неудобства.
• Модальные элементы имеют position: fixed , что может вызвать иногда их частичную отрисовку. Мы рекомендуем размещать модальные элементы на самом верху страницы, когда возможно, для избегания сбоев и влияния других элементов на корректную работу модальных элементов .modal .
• Опять же – из-за position: fixed есть некоторые сложности при использовании их на мобильных устройствах. Смотри документацию поддержки в браузерах.
• Из-за семантики HTML5 атрибут autofocus не работает с модальными элементами Bootstrap. Чтобы добиться такого же эффекта, используйте собственный JavaScript:

const myModal = document.getElementById('myModal') const myInput = document.getElementById('myInput')  myModal.addEventListener('shown.bs.modal', () =>   myInput.focus() >) 

Эффект анимации этого компонента зависит от медиа-запроса с ограниченным движением prefers-reduced-motion . Смотрите раздел специальных возможностей в нашей документации по редукции анимации.

Далее – демонстрация примеров и инструкции по использованию.

Примеры

Модальные компоненты

Ниже приведен пример статического модального окна (это означает, что его position и display были переопределены). Включены модальный заголовок, модальное тело (требуется для padding ) и модальный нижний колонтитул (необязательно). Мы просим вас по возможности включать модальные заголовки с действиями по отклонению или предоставить другое явное действие по отклонению.

Заголовок модального окна

Здесь идет основной текст модального окна

Закрыть Сохранить изменения

div class="modal" tabindex="-1">  div class="modal-dialog">  div class="modal-content">  div class="modal-header">  h5 class="modal-title">Заголовок модального окнаh5>  button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть">button>  div>  div class="modal-body">  p>Здесь идет основной текст модального окнаp>  div>  div class="modal-footer">  button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрытьbutton>  button type="button" class="btn btn-primary">Сохранить измененияbutton>  div>  div>  div> div> 

В приведенном выше статическом примере мы используем

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

«Живое» демо

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

Заголовок модального окна

У-у-у, вы читаете этот текст в модальном режиме!

Закрыть Сохранить изменения
Запустите демо модального окна

 button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">  Запустите демо модального окна button>  div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">  div class="modal-dialog">  div class="modal-content">  div class="modal-header">  h5 class="modal-title" id="exampleModalLabel">Заголовок модального окнаh5>  button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть">button>  div>  div class="modal-body">  .  div>  div class="modal-footer">  button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрытьbutton>  button type="button" class="btn btn-primary">Сохранить измененияbutton>  div>  div>  div> div> 

Статический фон

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

Заголовок модального окна

Я не закроюсь, если вы нажмете вне меня. Даже не пытайтесь нажать клавишу выхода.

Закрыть Понял
Запустить модальное окно со статическим фоном

 button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">  Запустить модальное окно со статическим фоном button>  div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">  div class="modal-dialog">  div class="modal-content">  div class="modal-header">  h5 class="modal-title" id="staticBackdropLabel">Заголовок модального окнаh5>  button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть">button>  div>  div class="modal-body">  .  div>  div class="modal-footer">  button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрытьbutton>  button type="button" class="btn btn-primary">Понялbutton>  div>  div>  div> div> 

Прокрутка длинного содержимого

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

Заголовок модального окна

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

Закрыть Сохранить изменения
Запустите демо модального окна

Вы также можете создать прокручиваемое модальное окно, которое позволяет прокручивать модальное тело, добавляя .modal-dialog-scrollable к .modal-dialog .

Заголовок модального окна

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

Это содержимое должно появиться внизу после прокрутки.

Закрыть Сохранить изменения
Запустите демо модального окна

 div class="modal-dialog modal-dialog-scrollable">  . div> 

Вертикальное центрирование

Добавьте .modal-dialog-centered к .modal-dialog для вертикального центрирования модального окна.

Заголовок модального окна

This is a vertically centered modal.

Закрыть Сохранить изменения

Заголовок модального окна

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

Закрыть Сохранить изменения
Вертикально центрированное модальное окно Вертикально центрированное прокручиваемое модальное окно

 div class="modal-dialog modal-dialog-centered">  . div>  div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">  . div> 

Всплывающие подсказки и возникающие подсказки

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

Заголовок модального окна

Поповер в модальном окне

Эта кнопка вызывает всплывающее окно при нажатии.

Подсказки в модальном окне

Эта ссылка и эта ссылка имеет всплывающие подсказки при наведении.

Закрыть Сохранить изменения
Запустите демо модального окна

div class="modal-body">  h5>Поповер в модальном окнеh5>  p>Эта a href="#" role="button" class="btn btn-secondary" data-bs-toggle="popover" title="Popover title" data-bs-content="Popover body content is set in this attribute.">кнопкаa> вызывает всплывающее окно при нажатии.p>  hr>  h5>Подсказки в модальном окнеh5>  p>a href="#" data-bs-toggle="tooltip" title="Tooltip">Эта ссылкаa> и a href="#" data-bs-toggle="tooltip" title="Tooltip">эта ссылкаa> имеет всплывающие подсказки при наведении.p> div> 

Использование сетки

Используйте сеточную систему Bootstrap в модальном окне, вложив .container-fluid в .modal-body . Затем используйте обычные классы системы сетки, как и везде.

Сетки в модальных окнах

.col-md-4 .ms-auto
.col-md-3 .ms-auto
.col-md-2 .ms-auto
.col-md-6 .ms-auto
Level 1: .col-sm-9
Level 2: .col-8 .col-sm-6
Level 2: .col-4 .col-sm-6
Закрыть Сохранить изменения
Запустите демо модального окна

div class="modal-body">  div class="container-fluid">  div class="row">  div class="col-md-4">.col-md-4div>  div class="col-md-4 ms-auto">.col-md-4 .ms-autodiv>  div>  div class="row">  div class="col-md-3 ms-auto">.col-md-3 .ms-autodiv>  div class="col-md-2 ms-auto">.col-md-2 .ms-autodiv>  div>  div class="row">  div class="col-md-6 ms-auto">.col-md-6 .ms-autodiv>  div>  div class="row">  div class="col-sm-9">  Level 1: .col-sm-9  div class="row">  div class="col-8 col-sm-6">  Level 2: .col-8 .col-sm-6  div>  div class="col-4 col-sm-6">  Level 2: .col-4 .col-sm-6  div>  div>  div>  div>  div> div> 

Различное модальное содержимое

У Вас есть несколько кнопок, которые запускают одно и то же модальное окно с немного разным содержимым? Используйте event.relatedTarget и HTML data-* атрибуты, чтобы изменять содержимое модального окна в зависимости от какая кнопка была нажата.

Ниже представлена живая демонстрация, за которой следуют примеры HTML и JavaScript. Для получения дополнительной информации прочтите документацию по модальным событиям для получения подробной информации о relatedTarget .

Открыть модальное окно для @mdo Открыть модальное окно для @fat Открыть модальное окно для @getbootstrap

Новое сообщение

Закрыть Отправить сообщение

button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@mdo">Открыть модальное окно для @mdobutton> button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@fat">Открыть модальное окно для @fatbutton> button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" data-bs-whatever="@getbootstrap">Открыть модальное окно для @getbootstrapbutton>  div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">  div class="modal-dialog">  div class="modal-content">  div class="modal-header">  h1 class="modal-title fs-5" id="exampleModalLabel">Новое сообщениеh1>  button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть">button>  div>  div class="modal-body">  form>  div class="mb-3">  label for="recipient-name" class="col-form-label">Получатель:label>  input type="text" class="form-control" id="recipient-name">  div>  div class="mb-3">  label for="message-text" class="col-form-label">Сообщение:label>  textarea class="form-control" id="message-text">textarea>  div>  form>  div>  div class="modal-footer">  button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Закрытьbutton>  button type="button" class="btn btn-primary">Отправить сообщениеbutton>  div>  div>  div> div>

const exampleModal = document.getElementById('exampleModal') exampleModal.addEventListener('show.bs.modal', event =>   // Кнопка, которая активировала модальное окно  const button = event.relatedTarget  // Извлекает информацию из атрибутов data-bs-*  const recipient = button.getAttribute('data-bs-whatever')  // При необходимости вы можете инициировать запрос AJAX здесь,  // а затем выполнить обновление в обратном вызове.  //  // Обновляет содержимое модального окна.  const modalTitle = exampleModal.querySelector('.modal-title')  const modalBodyInput = exampleModal.querySelector('.modal-body input')   modalTitle.textContent = `New message to $recipient>`  modalBodyInput.value = recipient >) 

Переключение между модальными окнами

Переключайтесь между несколькими модальными окнами с умным размещением атрибутов data-bs-target и data-bs-toggle attributes. Например, вы можете переключить модальное окно сброса пароля из уже открытого модального окна входа. Обратите внимание, что несколько модальных окон не могут быть открыты одновременн — этот метод просто переключается между двумя отдельными модальными окнами.

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

У Нас есть сайт hotelportofino.ru/
как можно сделать при клике на кнопку Бронировать выводить модальное окно с этого блока.
Для модальных окон используем fancybox.

94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
Ответы с готовыми решениями:

Как передать данные в модальное окно
В основном окне у меня есть var tur = oImg.src; Я открываю модальное окно.

Как открыть модальное окно ShowModal?
1) Кто напишет строчку кода с примером открытия модального окна? То-есть такого, которое берет.

Как передать данные из таблицы в модальное окно
Есть таблица с данными, как передать в модальное окно конкретную запись в инпуты для ее.

195 / 142 / 43
Регистрация: 12.03.2021
Сообщений: 811
не понятно в чем вопрос. обработчик onclick интересует или позиционирование?
Регистрация: 14.12.2021
Сообщений: 125
Splaisto, onclick
195 / 142 / 43
Регистрация: 12.03.2021
Сообщений: 811

Сообщение от lolaBetaa

код в студию
Регистрация: 14.12.2021
Сообщений: 125
Splaisto, код именно чего?
195 / 142 / 43
Регистрация: 12.03.2021
Сообщений: 811
верстка, кнопка, модалка, фреймворки используются-не используются. какой-нибудь по теме.
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
Помогаю со студенческими работами здесь

Как заставить модальное окно выполнить редирект?
Здравствуйте. Подскажите как сделать, чтобы при нажатии на кнопку, появившееся модальное окно.

Как сделать ссылку закрывающую модальное окно?
Здравствуйте. Помогите добавить ссылку закрывания модального окна, которая будет располагаться.

Как занести весь js код в модальное окно
Мне нужно исправить данный код следующим образом: на странице должна находиться кнопка — при.

Как загрузить ответ отправленной формы в модальное окно?
Есть форма, в ней, например, ввожу логин/пас и майл, и когда нажимаю на отправить, должно появиться.

Как установить получение, проверку и установки кукисов? Хочу связать модальное окно сайта с куки.
Здравствуйте, такой вопросик, как установить получение, проверку и установки кукисов. Хочу связать.

Вывод data-атрибутов в модальном окне

Верстка

Автор Алексей На чтение 5 мин Просмотров 5.9к. Опубликовано 20.03.2021 Обновлено 20.03.2021

Часто чтобы не создавать множество однотипных модальных окон, можно создать одно универсальное и передавать в него нужные data-атрибуты.

Допустим у нас есть landing page сверстанный на основе bootstrap 4 (с использованием jquery 2 или 3) с какими-товарами, пусть будут букеты цветов. Блок: листинг товаров, мини карточки с названием, картинкой, ценой и кнопкой заказа — которая вызывает модальное окно. К примеру у нас 10 букетов, не создавать же для них 10 отдельных модальных окон.

Чтобы не чего особо не выдумывать, возьмем разметку от bootstrap 4:

стандартная кнопка вызова модального окна:

button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"> Launch demo modal button>

И стандартная разметка самого модального окна:

 
 
 
 
Modal title
 ×  
 
.
 
Close Save changes 
 
 
 

смотри документацию по bootstrap 4 Modal .

ну и соответственно какая-нибудь простенькая форма .

Теперь давайте передадим при помощи кнопки 3 дата атрибута:

• название товара или заголовка для модального окна (data-nametitle)
• изображение товара (data-imgtovara).
• цену товара (data-pricetovar).

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

Заказать

А полная разметка модального окна примет примерно такой вид

  
 
 
 
Быстрый заказ цветов
 ×  
 
 
 
 
Ваше имя 
Ваш телефон 
Примечание 
  Заказать  
 
 
 

Будем передавать данные в блоки с классами tovarimg (изображение вместе с html разметкой), tovarinfo (название и цену товара с html разметкой). И в скрытые input с id hide1 (передадим туда название) и hide2 (передадим туда цену).

Для этого добавим немного js:

$(function() < $(".btn").click( function() < var imgtovara = $(this).attr('data-imgtovara'); var nametitle = $(this).attr('data-nametitle'); var pricetovar = $(this).attr('data-pricetovar'); $(".tovarimg").append(''); $(".tovarinfo").append('
' + nametitle + ''); $(".tovarinfo").append('
Цена:' + pricetovar + '
'); $("#hide1").attr('value', nametitle); $("#hide2").attr('value', pricetovar); >) >);