при клике на картинку модальное окно python django с применением bootstrap

Как сделать чтобы при клике на картинку появилось окно с зарактеристиками из БД (price, description etc..)

models.py

from django.db import models
from PIL import Image

class Product(models.Model):
    name = models.CharField(max_length=100)
    description = models.TextField()
    price = models.IntegerField()
    group = models.CharField(max_length=30)
    img = models.ImageField(default='noimage.jpg', upload_to='product_image')

    def __str__(self):
        return f'{self.name}'

views.py

from django.shortcuts import render
from web.models import Product

def index(request):
    return render(request, 'web/index.html')

def shop(request):
        product = Product.objects.all()
        context = {
        'pr' : product
        }
        return render(request, 'web/shops.html', context)

def category(request):
        return render(request, 'web/category.html')





    html shops
    {% extends 'web/main.html' %}
    {% load static %}
    {% block title_page %}
      <title>Магазин</title>
    {% endblock  %}
    {% block content %}
    <section class="main-section paddind" id="Portfolio">
      <!--main-section-start-->
      <div class="container">
        <h2>Магазин</h2>
        <h6>Ассортимент</h6>
        <div class="portfolioFilter">

          <ul class="Portfolio-nav wow fadeIn delay-02s">
            <li><a href="#" data-filter="*" class="current">Все</a></li>
            <li><a href="#" data-filter=".VID">Видеокамеры</a></li>
            <li><a href="#" data-filter=".REG">Регистраторы</a></li>
            <li><a href="#" data-filter=".DOM">Домофоны & Видеодомофоны</a></li>
            <li><a href="#" data-filter=".ACC">Cопутсвующие</a></li>
            <li><a href="#" data-filter=".KEY">Ключи & Смарт-карты</a></li>
          </ul>
        </div>

      </div>
      <div class="portfolioContainer wow fadeInUp delay-04s">
          {% for post in pr %}
          {% if post.group == "DOM" %}

        <div class=" Portfolio-box DOM">
          <a href=""><img src="{{ post.img.url }}" alt=""></a>
          <h3>{{ post.name }}</h3>
          <p>Цена: {{ post.price }} Руб</p>
        </div>

        {% elif post.group == "REG" %}
        <div class="Portfolio-box REG">
          <a href="img/Portfolio-pic2.jpg"><img src="{{ post.img.url }}" alt=""></a>
          <h3>{{ post.name }}</h3>
          <p>Цена: {{ post.price }} Руб</p>
        </div>


         {% elif post.group == "KEY" %}
        <div class="Portfolio-box KEY">
        <a href=""><img src="{{ post.img.url }}" alt=""></a>
          <h3>{{ post.name }}</h3>
          <p>Цена: {{ post.price }} Руб</p>
        </div>

        {% elif post.group == "ACC" %}
        <div class=" Portfolio-box ACC">
          <a href="img/Portfolio-pic4.jpg"><img src="{{ post.img.url }}" alt=""></a>
          <h3>{{ post.name }}</h3>
          <p>Цена: {{ post.price }} Руб</p>
        </div>

          {% else %}

        <div class="Portfolio-box VID">
          <a href="img/Portfolio-pic5.jpg"><img src="{{ post.img.url }}" alt=""></a>
          <h3>{{ post.name }}</h3>
          <p>Цена: {{ post.price }} Руб</p>
        </div>

      {% endif %}
      {% endfor %}

      </div>
    </section>
    {% endblock content %}