Home > Enterprise >  Bootstrap 5 - Modal Open on Page Load
Bootstrap 5 - Modal Open on Page Load

Time:10-13

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/[email protected]/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!            
  • Related