Bootstrap 5 Modal can be triggered in two ways using data attributes and using JavaScript. Options are introduced to the modal to add other utilities and attributes, such as the ability to display a background image while the modal is active. The implementation of these Options through JavaScript is achieved by the Passing options() Method.
Prerequisite: Bootstrap 5 Modal, and Bootstrap 5 Modal Via JavaScript
Bootstrap 5 Modal Passing options() Method used Options:
- backdrop: While the modal is open, it is used to add a backdrop, which is a grey overlay, to the background. The value can be a string called “static,” and the type is boolean with the value “true” as the default. The modal window does not dismiss when the background is clicked while the static string is present.
- keyboard: It establishes whether the keyboard’s escape key may be used to close the modal. The default value is “true” and the type is boolean.
- focus: Focus is brought to the modal with this option. The default value is “true” and the type is boolean.
Syntax:
var myModal = new bootstrap.Modal(document.getElementById("myModal"), {
backdrop: "false" //can replace with any method
});Example 1: The below code example demonstrates the disabling of the backdrop and keyboard modal options using the Passing options() Method with JavaScript.
<!DOCTYPE html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<script>
document.addEventListener("DOMContentLoaded",
function () {
// Passing options method()
var demoModal =
new bootstrap.Modal(
document.getElementById("demoModal"), {
backdrop: false,
keyboard: false
});
var btn = document.getElementById("demoBtn");
btn.addEventListener("click", function () {
demoModal.show();
});
});
</script>
</head>
<body>
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>Bootstrap 5 Modal Passing options() Method</h4>
<button type="button" id="demoBtn" class="btn btn-lg btn-success m-4">
Launch Demo Modal
</button>
<div id="demoModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
This is a demo modal
</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal">
</button>
</div>
<div class="modal-body">
<p>
This modal doesn't has a backdrop and
keyboard escape functionality
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The below code example demonstrates the usage of the backdrop and focus modal options using the Passing options() Method with JavaScript. The backdrop is static, so clicking on the backdrop will not close the modal.
<!DOCTYPE html> <html lang="en">
<head>
<link href=
rel="stylesheet">
<script src=
</script>
<script>
document.addEventListener("DOMContentLoaded",
function () {
// Passing options method()
var demoModal =
new bootstrap.Modal(document.getElementById("demoModal"), {
backdrop: "static",
focus: true
});
var btn = document.getElementById("demoBtn");
btn.addEventListener("click", function () {
demoModal.show();
});
});
</script>
</head>
<body>
<h1 class="mt-3 text-success">
GeeksforGeeks
</h1>
<h4>
Bootstrap 5 Modal Passing options() Method
</h4>
<button type="button" id="demoBtn" class="btn btn-lg btn-success m-4">
Launch the Modal having grid
</button>
<div id="demoModal" class="modal fade" tabindex="-1">
<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>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.0/components/modal/#passing-options