Логотип Хекслета
/
Вопросы и ответы
/
Bootstrap
/

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

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

4 года назад

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

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

Ответы

1

Передача данных в модальное окно 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: Объяснение кода

  1. HTML структура:

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

  2. JavaScript функция:

    • Функция setData(title, body) принимает два параметра, title и body, которые позволяют динамически установить заголовок и текст модального окна.
    • Внутри функции используется document.getElementById для изменения содержимого заголовка и тела модального окна.

  3. Подключение Bootstrap:

    • Включены ссылки на CSS и JS файлы Bootstrap через CDN. Это обеспечивает стили и функциональность модальных окон.

год назад

Maksim Litvinov

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