Bootstrap 5 Modal Options

Bootstrap 5Modal 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.

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.

Output:

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