Переиспользуемое модальное окно без REACT

@Alex3928 · Регистрация: 18.05.2021

Студворк — интернет-сервис помощи студентам

Как можно сделать переиспользуемое модальное окно на чистом JS? На React это легко сделать + есть даже видео на ютубе.

На React внутри модального она используют {children}

Если не понятно,я имею виду одно модальное окна в котором меняется контент(текст, картинка , заголовок и тд.)

На React делают модальное окно и добавляют {children}

HTML5
1
2
3
4
5
<div class="modal" id="modal">
    <div class="modal__container">
           И тут сам контент ({children})
    </div>
</div>

Вот и вопрос, как можно это можно реализовать на JS без React

@DrType · 04.12.2021, 15:22

Как вариант — использовать sweetalert.

@Alex3928 · 04.12.2021, 16:59 **[ТС]**

Да как вариант но я бы хотел узнать как с этим работать (одно окно переиспользовать множество раз
)

@DimaDima1985 · 04.12.2021, 17:28

Создаёте функцию, которая создаёт модальное окно (некий div поверх всех div-ов), и вызываете её в нужный момент с нужными параметрами, которые задают содержимое модального окна.

@Alex3928 · 04.12.2021, 19:03 **[ТС]**

Я имею виду как дочерние элементы модального окна менять. Как модальное окно делать я знаю, меня интересует как дочерние элементы менять

@DimaDima1985 · 04.12.2021, 22:02

Функция, вызывающая модальное окно, должна иметь аргументы - содержимое модального окна: текст, картинки, возможно, некие колбеки для кнопок модального окна.

@Alex3928 · 04.12.2021, 22:23 **[ТС]**

Можно пример?

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@DrType 6553 / 3624 / 1075 Регистрация: 07.09.2019 Сообщений: 5,877 Записей в блоге: 1
	04.12.2021, 15:22
	Как вариант — использовать sweetalert. 0

@Alex3928 2 / 2 / 0 Регистрация: 18.05.2021 Сообщений: 61
	04.12.2021, 16:59 [ТС]
	Да как вариант но я бы хотел узнать как с этим работать (одно окно переиспользовать множество раз ) 0

@DimaDima1985 331 / 238 / 80 Регистрация: 15.11.2017 Сообщений: 453 Записей в блоге: 4
	04.12.2021, 17:28
	Создаёте функцию, которая создаёт модальное окно (некий div поверх всех div-ов), и вызываете её в нужный момент с нужными параметрами, которые задают содержимое модального окна. 1

@Alex3928 2 / 2 / 0 Регистрация: 18.05.2021 Сообщений: 61
	04.12.2021, 19:03 [ТС]
	Я имею виду как дочерние элементы модального окна менять. Как модальное окно делать я знаю, меня интересует как дочерние элементы менять 0

@DimaDima1985 331 / 238 / 80 Регистрация: 15.11.2017 Сообщений: 453 Записей в блоге: 4
	04.12.2021, 22:02
	Функция, вызывающая модальное окно, должна иметь аргументы - содержимое модального окна: текст, картинки, возможно, некие колбеки для кнопок модального окна. 0

@Alex3928 2 / 2 / 0 Регистрация: 18.05.2021 Сообщений: 61
	04.12.2021, 22:23 [ТС]
	Можно пример? 0