Django & Bootstrap: Модальное окно при загрузке

Добрый день

У меня следующая проблема, у меня, насколько мне позволяют мои знания,

Я пробовал использовать bootstrap CDN, а также метод установки пакета pip, но когда я пытаюсь заставить мой модал отображаться, я не могу заставить его работать, может кто-нибудь взглянуть на мой код и сообщить мне

index.html

{% load static %} {% load bootstrap5 %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Landing Page</title>
        {% comment %} Bootstrap {% endcomment %}
        <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
            crossorigin="anonymous"
        /> 
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4"
            crossorigin="anonymous"
        ></script>
        <link rel="stylesheet" href="{% static 'css/style.css' %}" />
        <script type="text/javascript">
            $(window).on("load", function () {
                $("#myModal").modal("show");
            });
        </script>
    </head>
    <body>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
        <div class="modal hide fade" id="myModal">
            <div class="modal-header">
                <a class="close" data-dismiss="modal">x</a>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <p>One fine body…</p>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn">Close</a>
                <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
        {% comment %} header {% endcomment %}
        <header>
            <img src="" alt="" />
        </header>

        {% comment %} Main Conntent {% endcomment %}
        <main>
            <div class="row">
                <div class="text-center">
                    <button
                        id="btnSubmit"
                        type="submit"
                        class="btn btn-danger py-2 px-5 text-center d-flex align-items-end"
                    >
                        Enter
                    </button>
                </div>
            </div>
        </main>

        {% comment %} Footer {% endcomment %}
        <footer>
            <p>give it an ice cold shot</p>
        </footer>
    </body>
</html>

Согласно документации я включил bootstarp54 в мои установленные приложения в settings.py

settings.py

INSTALLED_APPS = [
    'comp.apps.CompConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'cloudinary_storage',
    'django.contrib.staticfiles',
    'cloudinary',
    'bootstrap5',
]

Какая лучшая практика и лучший способ загрузки модала при загрузке, я довольно новичок во всех фреймворках и я активно изучаю JavaScript в течение некоторого времени,

Кто-нибудь знает, включен ли jQuery в метод pip install pacakges?

Вы пытаетесь использовать jquery, когда это не нужно (и недоступно, насколько я вижу)

Вы можете просто использовать ванильный JS:

window.onload = (event) => {
  console.log("page is fully loaded");
};
Вернуться на верх