How to Create Modal using Bootstrap 5 ?
Last Updated :
18 Jul, 2023
Bootstrap 5 Modal is a dialog box or popup window that allows you to display important information to users or request necessary actions. Modals are built with HTML, CSS, and JavaScript components that create lightboxes, user notifications, or custom content. They overlay other elements on the page, disabling body scroll when active. Modals typically consist of a header, message body, and footer containing action buttons. They are commonly used for critical actions like confirming user decisions or displaying important warnings.
Syntax:
<div class="modal"> Contents... <div>
Approach:
The following approaches will be used to build the basic modal, which is described below:
Approach 1: Using JavaScript
This approach involves using JavaScript to control the modal dynamically. You can create an instance of the Modal class and use its methods to display or hide the modal. You can also attach event listeners to buttons or elements to activate the modal upon user interactions.
Syntax:
// Create an instance of the Modal class
let myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();
myModal.hide();
Example: In this example, we will use javascript for creating a modal.
HTML
<!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">
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="container">
<div class="header">
<h3 class="text-success">
GeeksforGeeks
</h3>
<h5>
Bootstrap 5 Modal Via JavaScript
</h5>
</div>
<button class="btn btn-success"
onclick="showModal()">
Show Modal
</button>
<div id="gfg" class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
GeeksforGeeks
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal"
aria-label="Close">
</button>
</div>
<div class="modal-body">
<p>
It is a dialog box/popup window that is
displayed on top of the current page.
</p>
</div>
<div class="modal-footer">
<button type="button"
class="btn btn-secondary"
data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<script>
let modal =
new bootstrap.Modal(document.getElementById('gfg'));
function showModal() {
modal.show();
}
</script>
</body>
</html>
|
Output:
.gif)
Approach 2: By implementing the Data Attribute
Bootstrap provides the option to trigger a modal using data attributes directly in the HTML. You can add the data-bs-toggle attribute with the value modal to an element that should trigger the modal. Additionally, the data-bs-target attribute is used to specify the target modal’s id. This allows for seamless integration without the need for explicit JavaScript code.
Syntax:
<button data-bs-toggle="modal"
data-bs-target="#myModal">
Open Modal
</button>
Example: In this example, we will use data attributes for creating the modal.
HTML
<!DOCTYPE html>
<html>
<head>
<link href=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous">
</script>
</head>
<body class="w-80 p-3">
<div>
<h2 class="text-success">
GeeksforGeeks
</h2>
<h3>
Bootstrap Modal Via Data Attributes
</h3>
<button type="button"
class="btn btn-primary"
data-bs-toggle="modal"
data-bs-target="#GFG">
Show Modal
</button>
<div class="modal fade" id="GFG">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
Modal
</h5>
<button type="button"
class="btn-close"
data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>I am a Modal</p>
<p>
Bootstrap Modal Via Data Attributes
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
.gif)
Share your thoughts in the comments
Please Login to comment...