Проблема с закрытием модалов при нажатии за пределами определенной страницы

Я реализовал модалы на своем Django-сайте с помощью Bootstrap, где модалы открываются при нажатии на кнопки и закрываются при нажатии за их пределами. Эта функциональность отлично работает на большинстве страниц моего сайта, включая базовый шаблон. Однако на системной странице я столкнулся с проблемой, когда модалы не закрываются при нажатии на кнопки за ее пределами.

Вот соответствующий фрагмент кода из моего base.html:

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{% static 'styles.css' %}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</head>
<body class="background-image-shop">
    <!-- Navbar -->    
    <nav class="main-top-navbar navbar navbar-light bg-black fixed-top navbar-custom">
        <div class="container">
            <div class="main-top-navbar-elements navbar-text">
                <a href="{% url 'shop' %}" class="font-weight-bold text-light" style="margin-right: 20px;">Tribute |</a>
                <a href="{% url 'temples' %}" class="font-weight-bold text-light" style="margin-right: 20px;">Temples |</a>
                <a href="#" class="font-weight-bold text-light" style="margin-right: 20px;">Merchandise |</a>
            </div>
            <a href="#" class="navbar-brand">Your Logo</a>
            <!-- Add Product Button (visible for admin users only) -->
            {% if user.is_authenticated and user.is_superuser %}
                <button class="btn btn-outline-light" onclick="showAddProductModal()">Add Product</button>
            {% endif %}
            <!-- Search Bar -->
            <div class="shop-slogan">
                <p>The Cards Await You!</p>
            </div>
        </div>
    </nav>

    <!-- Main content -->
    <div id="main-content">
        <!-- Your website content here -->
        {% block body %}
        
        {% endblock %}
    </div>

    <!-- Add Product Modal -->
    <div id="add-product-modal" class="modal">
        <div class="modal-content">
            <!-- Include your add product form here -->
            {% include 'shop7/add_product.html' %}
        </div>
    </div>
</body>
</html>

И соответствующий код из system.html:

Это должно дать вам полный код для наглядного представления вашей проблемы на Stack Overflow. Дайте мне знать, если вам понадобится дальнейшая помощь!

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