Bootstrap 5 Modal Passing options() Method

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.

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.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/modal/#passing-options