Pass value to bootstrap modal?

S

Shinguru2019-01-06 23:03:26

JavaScript

Shinguru, 2019-01-06 23:03:26

Welcome all.
The point is this. I know very little JS, since I am just starting to learn, but I really want to implement my plan.

there is a code:

<!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>

In this example, I have a block with a buy button, which, when clicked, opens a confirmation window.
The id="toggle1" parameter each time takes the value unloaded from the database (in this case, this value is 1 ). So the essence of the question is how to pass this value to the modal window (with what script) that appears after clicking on the buy button and display it there?

I will be very grateful to some working example and preferably with comments on it ...

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Alex-1917, 2019-01-07
@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>

Google like this: bootstrap modal events
)))