Bootstrap 5 - Modal Open on Page Load
Question
I am trying to implement a modal that opens automatically when the page is loaded for a school assignment. I am using Bootstrap 5 and all the examples I have found online use older versions. The modal can be found under the comment Vertically Centered Cookies Modal . I have used a Bootstrap CDN as well as the Popper Bundle from https://getbootstrap.com/ . This is my code:
<!DOCTYPE HTML>
<html lang="en-AU">
<head>
<!-- Require Meta Tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CDN - Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Title -->
<title>Title Here</title>
<!-- Webpage Icon -->
<link rel="shortcut icon" href="Images\Pilot640_Logo_Symbol.ico"/>
</head>
<body>
<!-- Nav Bar -->
<nav class="navbar navbar-expand-sm bg-secondary navbar-white">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="Images\Pilot640_Logo_Symbol.ico" alt="Logo" style="width:100px;" class="rounded-pill">
</a>
</div>
</nav>
<!-- Header Section -->
<header>
</header>
<!-- Vertically Centered Cookies Modal -->
<div class="modal-dialog modal-dialog-centered" id="onload">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Do You Want Cookie? We Want Yours! 🍪</h5>
</div>
<div class="modal-body">
This site uses cookies to personalies the content for you.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--Modal JS Script -->
<script type="text/javascript">
$(window).load(function(){
$('#onload').modal('show');
});
</script>
</body>
</html>
If anyone knows what the problem is or how to make one, the help would be greatly appreciated.
2 answers
solution1
2 ACCPTED 2021-10-12 03:23:21
First of all welcome to Stackoverflow community.
As you have asked, you have correct the modal dialog code snippet first. You have missed the first line of modal in there. you have to add the id to that line, not to the modal-dialog div
<div class="modal fade" id="onload" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> <!-- Add this line to your code -->
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Do You Want Cookie? We Want Yours! 🍪</h5>
</div>
<div class="modal-body">
This site uses cookies to personalies the content for you.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> <!-- And the relavant closing div tag -->
Then after that you need to import jquery to your code. Otherwise code jquery code segments will not work in your html file. Finally rather than using jquery onload event listner use the native VanillaJS window.onload event to trigger your modal.
<!-- import jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--Modal JS Script -->
<script type="text/javascript">
window.onload = () => {
$('#onload').modal('show');
}
</script>
Then your bootstrap modal will work with expected behavior.
solution2
1 2023-01-26 18:53:18
Vanilla JS Solution
The HTML would remain the same, but you wouldn't need to load jQuery
<script type="text/javascript">
window.onload = () => {
const myModal = new bootstrap.Modal('#onload');
myModal.show();
}
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.