@Shinguru

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

буду очень благодарен какому-нибудь рабочему примеру и желательно с комментариями к нему...
  • Вопрос задан
  • 78 просмотров
Пригласить эксперта
Ответы на вопрос 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
)))
Ответ написан
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы