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

  ?> else  ?>
 
№
 
ПОДРАЗДЕЛЕНИЕ
 
ТИП ТЕХНИКИ
 
ПРОИЗВОДИТЕЛЬ
 
МОДЕЛЬ
 
СЕРИЙНЫЙ НОМЕР
 
ИНВЕНТАРНЫЙ НОМЕР
 
ДАТА ВВОДА В ЭКСПЛУАТАЦИЮ
 
ДЕЙСТВИЯ
 
 
 
 
id_spravtech; ?>
 
name_subdivision; ?>
 
type; ?>
 
manufacture; ?>
 
model; ?>
 
serial_number; ?>
 
inventary_number; ?>
 
date; ?>
 
 
  
 
В БАЗЕ ДАННЫХ НЕТ ЗАПИСЕЙ
 
 

 
 
 
 
" required name="manufacture" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 
 type?>" required name="manufacture" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 
" required name="manufacture" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 
" required name="model" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 
 serial_number?>" required name="serialnumber" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 
 inventary_number?>" required name="inventarynumber" type="text" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 
 date?>" required name="date" type="date" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
 
 
Закрыть Сохранить  
 
 

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

Здесь могла бы быть ваша реклама

Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel

Помог: 3 раз(а)

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

Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо

После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..

Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.

Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.

На последок как оно происходит на форумах

Цитата:

Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.

Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12

Как передать данные в модальное окно через 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 сент. 2023
• 104 просмотра

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

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

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

Верстка

Автор Алексей На чтение 5 мин Просмотров 6.4к. Опубликовано 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); >) >);