Передача данных в bootstrap-модал (django, bootstrap5)

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

div:

<div class="col-lg-4 col-md-6 col-12 mt-4 pt-2">
    <div class="blog blog-primary">
        <img src="{{el.picture.url}}" class="img-fluid rounded-md shadow" alt="">
        <div class="p-4 pb-0">
            <a href="" class="title text-dark h5">{{el.title}}</a>
            <p class="text-muted mt-3 mb-0" style="
                max-height: 50px;
                overflow: hidden;
                position: relative;">{{ el.content }}</p>
            <div class="mt-3">
                <a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-bs-id="3">Open<i class="uil uil-arrow-right"></i></a>
            </div>
        </div>
    </div>

btn:

<a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-bs-id="3">Open<i class="uil uil-arrow-right"></i></a>

modal:

<div class="modal fade absolute-center" id="openBlog" tabindex="-1" aria-bs-labelledby="blog-single-label" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                {{el.title}}
                <button class="btn-close" data-bs-dismiss="modal" aria-bs-label="close"></button>
            </div>
            <div class="modal-body">
                <img src="{{el.picture.url}}" class="img-fluid rounded-md shadow" alt="">

                <p name="elId" id="elId">{{ el.content }}</p>
                </div>
        </div>
    </div>
</div>

jquery:

$(document).on("click", ".openBlogDialog", function () {
     var myBlogId = $(this).data('id');
     $(".modal-body #elId").val( myBlogId );
});

При нажатии на кнопку в любом блоке открывается модальное окно с данными из последнего

Я использую django, bootstrap5

Передача данных в бутстрап-модал. Я взял это в качестве примера, но у меня ничего не получилось

  1. Вы назвали свой атрибут данных data-bs-id, но затем попытались получить его как data-id.
  2. Вы пытались установить значение для абзаца. У абзацев нет свойства value.

$(document).on("click", ".openBlogDialog", function() {
  const myBlogId = $(this).data('id');
  $("#elId").text(myBlogId);
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<a class="btn btn-link primary openBlogDialog" data-bs-toggle="modal" href="#openBlog" data-id="3">Open<i class="uil uil-arrow-right"></i></a>

<div class="modal fade absolute-center" id="openBlog" tabindex="-1" aria-bs-labelledby="blog-single-label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        {{el.title}}
        <button class="btn-close" data-bs-dismiss="modal" aria-bs-label="close"></button>
      </div>

      <div class="modal-body">
        <img src="{{el.picture.url}}" class="img-fluid rounded-md shadow" alt="">

        <p name="elId" id="elId">{{ el.content }}</p>
      </div>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" integrity="sha384-IDwe1+LCz02ROU9k972gdyvl+AESN10+x7tBKgc9I5HFtuNz0wWnPclzo6p9vxnk" crossorigin="anonymous"></script>

Вернуться на верх