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

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Передача данных в модальное окно 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"">&times;</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. Это обеспечивает стили и функциональность модальных окон.

10 месяцев назад

Maksim Litvinov

2 месяца

Bootstrap

Навык работы с SASS, Bootstrap 5 и Gulp для ускорения, упрощения и оптимизации процесса вёрстки и разработки сайтов

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

1 месяц

Основы веб-разработки

Основы HTML, CSS, блочная модель, основы Javascript, синтаксис, арифметика, условия, циклы, функции, поиск ошибок

Похожие вопросы