Good day
I have the following issue, I have, as far as my knowledge allows me,
I have tried using the bootstrap CDN and also the pip package installer method, but when I try get my modal to show then I cant get it work, could someone have a look at my code and let me know
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>
According to the documentation I have included bootstarp54 in my installed apps on the 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',
]
What is the best practice and the best way to load on a modal on load, I am quite new to all frameworks and I have extensively been learning JavaScript for a while,
Does anyone know if jQuery is included in the pip install pacakges method?
>Solution :
You are trying to use jquery, when it is not necessary (and not available as far as I can see)
You can just use vanilla JS:
window.onload = (event) => {
console.log("page is fully loaded");
};