Задать вопрос
@Shinguru
javascript

Передать значение в модальное окно bootstrap?

Приветствую всех.
Суть такова. JS я очень плохо знаю, так как только-только начинаю изучать, но реализовать задуманное очень хочется.

имеется код:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
        crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>
    <title>магазин</title>
</head>

<body>

    <div class="">
        <div class="tab-content container">
            <div id="tab-soft" class="tab-pane fade in active show">
                <div class="row pt-5">
                    <div class="col-md-3">
                        <div class="card mb-4 shadow-lg">
                            <img src="img/soft.jpg" alt="Товар" class="img-thumbnail">
                            <div class="card-body">
                                Lorem Ipsum is simply dummy text of the printing and typesetting industry.
                                <div class="collapse position-relative" id="toggle1">
                                    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when
                                    an
                                    unknown printer took a galley of type and scrambled it to make a type specimen
                                    book. It
                                    has
                                    survived not only five centuries, but also the leap into electronic typesetting,
                                    remaining
                                    essentially unchanged. It was popularised in the 1960s with the release of Letraset
                                    sheets
                                    containing Lorem Ipsum passages, and more recently with desktop publishing software
                                    like
                                    Aldus PageMaker including versions of Lorem Ipsum.
                                </div>
                            </div>
                            <div class="d-flex p-2 justify-content-between align-items-center">
                                <button data-target="#toggle1" data-toggle="collapse" type="button" class="btn btn-secondary">Подробнее</button>
                                <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modal_purchase_question">Купить</button>
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>

        <!-- Модалка -->
        <div class="modal fade" id="modal_purchase_question" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">Товар: unnamed</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body">
                        <p>Вы уверены?</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Да</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">Нет</button>
                    </div>
                </div>

            </div>
        </div>

    </div>
</body>

</html>


В данном примере у меня имеется блок с кнопкой купить, при нажатии на которую открывается окно с подтверждением.
Параметр id="toggle1" каждый раз принимает значение выгружаемое из БД (в данном случает это значение 1 ). Так вот суть вопроса такая, как передать это значение в модальное окно (каким скриптом), которое появляется после нажатия на кнопку купить и отобразить его там?

буду очень благодарен какому-нибудь рабочему примеру и желательно с комментариями к нему...
  • Вопрос задан
  • 4113 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
alex-1917
@alex-1917
Если ответ помог, отметь решением
shop24club.ru/api/modal1.php

<script>
	$('#modal_purchase_question').on('show.bs.modal', function (event) {
		var button = $(event.relatedTarget);
		var recipient = button.data('whatever');
		var recipient_two = button.parents('.card').find('h3').text();
		var modal = $(this);
		modal.find('.modal-title').text('Заголовок: ' + recipient_two + ', дата-аттрибут: ' + recipient);
	})
</script>


Гуглить вот так: bootstrap modal events
)))
Ответ написан
4 комментария
4 комментария
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
summer • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript разработчик
Мэтч
от 80 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Отрисовать дизайн страницы "Календарь мероприятий" для школы бизнеса
20 апр. 2024, в 16:12
1000 руб./за проект
Разработать англоязычную версию корпоративного сайта на Statamic
20 апр. 2024, в 15:58
1500 руб./в час
Запись обучающих роликов и написание по машинному обучению
20 апр. 2024, в 15:40
3000 руб./за проект
Ещё заказы