Как передать данные в модальное окно bootstrap
Ответы
Передача данных в модальное окно Bootstrap может быть реализована с помощью JavaScript и jQuery. Bootstrap предоставляет удобные компоненты для создания модальных окон, а с помощью JavaScript можно динамически изменять содержимое этих окон в зависимости от пользовательских действий. Рассмотрим, как это можно сделать шаг за шагом.
Шаг 1: Подготовка HTML
Сначала создадим структуру модального окна и кнопки для его открытия. Обратите внимание на атрибуты data-toggle и data-target в кнопках, которые Bootstrap использует для работы с модальными окнами.
<!DOCTYPE html>
<html lang=""ru"">
<head>
<meta charset=""UTF-8"">
<meta name=""viewport"" content=""width=device-width, initial-scale=1.0"">
<link rel=""stylesheet"" href=""https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"">
<title>Модальное окно</title>
</head>
<body>
<div class=""container mt-5"">
<h1>Пример модального окна</h1>
<button class=""btn btn-primary"" data-toggle=""modal"" data-target=""#exampleModal"" onclick=""setData('Заголовок', 'Это текст в модальном окне')"">
Открыть модальное окно
</button>
</div>
<!-- Модальное окно -->
<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=""close"" data-dismiss=""modal"" aria-label=""Close"">
<span aria-hidden=""true"">×</span>
</button>
</div>
<div class=""modal-body"" id=""modalBody"">
Здесь будет текст.
</div>
<div class=""modal-footer"">
<button type=""button"" class=""btn btn-secondary"" data-dismiss=""modal"">Закрыть</button>
<button type=""button"" class=""btn btn-primary"">Сохранить изменения</button>
</div>
</div>
</div>
</div>
<script src=""https://code.jquery.com/jquery-3.5.1.slim.min.js""></script>
<script src=""https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js""></script>
<script src=""https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js""></script>
<script>
function setData(title, body) {
document.getElementById('exampleModalLabel').innerText = title;
document.getElementById('modalBody').innerText = body;
}
</script>
</body>
</html>
Шаг 2: Объяснение кода
HTML структура:
- Создана кнопка для открытия модального окна, при клике на которую вызывается функция
setData(). - Модальное окно содержит заголовок, тело и кнопки для закрытия и сохранения изменений.
- Создана кнопка для открытия модального окна, при клике на которую вызывается функция
JavaScript функция:
- Функция
setData(title, body)принимает два параметра,titleиbody, которые позволяют динамически установить заголовок и текст модального окна. - Внутри функции используется
document.getElementByIdдля изменения содержимого заголовка и тела модального окна.
- Функция
Подключение Bootstrap:
- Включены ссылки на CSS и JS файлы Bootstrap через CDN. Это обеспечивает стили и функциональность модальных окон.
1
0
