Задать вопрос
@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 ). Так вот суть вопроса такая, как передать это значение в модальное окно (каким скриптом), которое появляется после нажатия на кнопку купить и отобразить его там?

буду очень благодарен какому-нибудь рабочему примеру и желательно с комментариями к нему...
  • Вопрос задан
  • 4275 просмотров
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 FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Frontend-разработчик JavaScript
div. • Ставрополь
от 40 000 до 90 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Автоматизировать проверку валидности на сайте
19 дек. 2024, в 05:20
3000 руб./за проект
Требуется настроить по инструкции сервер на ubuntu
19 дек. 2024, в 05:19
3000 руб./за проект
3д модели по эскизам
19 дек. 2024, в 02:11
15000 руб./за проект
Ещё заказы