Bootstrap 5 Modal option can be used in two ways using data attributes and using JavaScript. Options are added to append different utilities and properties to the modal like having a backdrop on the background while the modal is open, etc.
Bootstrap 5 Modal Options Attribute:
- data-bs-*: Options should be passed as data attributes in the modal container.
The following are the option that is replaceable with * of data-bs-*:
- backdrop: It is used to add a backdrop which is a greyish overlay to the background when the modal is open. The type is boolean and the default value is “true”, and also it takes a string “static” as a value. When added the static string, the modal does not close when the backdrop is clicked on.
- keyboard: It determines whether the escape key on the keyboard can close the modal. The type is boolean and the default value is “true”.
- focus: This option is used to direct focus to the modal. The type is boolean and the default value is “true”.
Syntax:
<div class="modal" data-bs-*=value>
<!-- Modal Content --!>
</div>Note: The * in the data-bs-* is replaced by the name of one of the options given above.
Example 1: The code below demonstrates the disabling of the backdrop and adding keyboard modal options along with adding dynamic height to the modal.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var btn = document.getElementById("showText");
btn.addEventListener("click", function() {
document.getElementById("text").style.display = "block";
var myModal =
bootstrap.Modal.getInstance(document.getElementById("myModal"));
myModal.handleUpdate();
});
});
</script>
</head>
<body>
<div class="m-4">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal Options</h4>
<button type="button" class="btn btn-lg btn-success mt-4" data-bs-toggle="modal" data-bs-target="#myModal">
Launch Modal
</button>
<div id="myModal" class="modal fade" tabindex="-1" data-bs-backdrop="false" data-bs-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
This is main modal with
no backdrop and Keyboard utility
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>
<button type="button" id="showText" class="btn btn-link">
Click here to see more
about Data Structures.
</button>
</p>
<div style="display:none;" id="text">
<p>
A data structure is a storage that
is used to store and organize data.
</p>
<p>
It is a way of arranging data on a
computer so that it can be accessed and
updated efficiently.
</p>
<p>
A data structure is not only used
for organizing the data.
</p>
<p>
It is also used for processing,
retrieving, and storing data.
</p>
<p>
There are different basic and advanced
types of data structures that are used
in almost every program or software system
that has been developed. So we must
have good knowledge about data structures.
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">
Ok, I got it
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The code below demonstrates the usage of the backdrop and focus modal options along with adding a grid to the modal. The backdrop is static, so clicking on the backdrop will not close the modal.
HTML
<!DOCTYPE html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
</head>
<body>
<div class="m-4">
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal Options</h4>
<div class="container">
<button type="button" class="btn btn-success mt-4" data-bs-toggle="modal" data-bs-target="#gridModal">
Launch Modal to show grid
</button>
<div class="modal fade" id="gridModal" data-bs-backdrop="static" data-bs-focus="true" tabindex="-1" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"
id="gridModalLabel">
This Modal Contains a Grid
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
</button>
</div>
<div class="modal-body">
<div class="container p-4">
<div class="row text-light mb-3">
<div class="col-lg-7 bg-success border">
col-7
</div>
<div class="col-lg-5 bg-success border">
col-5
</div>
</div>
<div class="row text-light">
<div class="col-lg-6 bg-secondary border">
col-6
</div>
<div class="col-lg-6 bg-secondary border">
col-6
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#options