bootstrap modal show on page load without jquery
To display a Bootstrap modal on page load without using jQuery, you can use the Bootstrap JavaScript API. Here is an example of how you can achieve this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Bootstrap Modal</title>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open Modal
</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>This is the modal content.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
In this example, the modal is triggered by a button with the data-toggle and data-target attributes set. The data-toggle attribute specifies that the button should trigger a modal, and the data-target attribute specifies the ID of the modal to be opened.
The modal itself is defined within a <div> element with the class modal. It contains the modal content such as the header, body, and footer.
To include the necessary Bootstrap CSS and JavaScript files, you can use the respective CDN links provided in the example.
When the page loads, the modal will be hidden by default. By clicking on the "Open Modal" button, the modal will be displayed. You can customize the content and styling of the modal as per your requirements.
This approach allows you to show a Bootstrap modal on page load without relying on jQuery.