Bootstrap 5 Modal Usage

Bootstrap 5 Modal plugin is used to create a customized webpage where we can add dialog boxes for user notifications and lightboxes. Bootstrap 5 modal can hide the content on demand with the help of JavaScript or via data attributes. Default scrolling behavior can also be overridden by modal and it gives a click area for dismissing the models which are shown on the webpage by using the .modal-backdrop class. 

We will discuss the usage of Bootstrap 5 Modal usages.

Bootstrap 5 Modal Usage

• Via Data Attributes: We can activate a modal without using JavaScript by setting the value of the modal for data-toggle on the button tag which is a controller element. We should mention the targeted modal that we want to toggle by using data-target="#ModalName"
• Via JavaScript: We can also create a modal with the help of JavaScript which will help to manipulate the modal dynamically and to create an interactive web page.
• Options: Options can be passed via data attributes or JavaScript.
• Methods: There are different methods in JavaScript with the help of which we can manipulate the modal according to the user's need.
• Events: Few events of Bootstrap modal classes are used for the functionality of the modal. 

Example 1: The following code triggers a modal with id "modal".

Output:

Example 2: The following code toggles the modal using JavaScript. The modal will be automatically toggled.

Output:

Example 3: The following code is used to see the example of show.bs.modal where we can open to modal alternatively.

Output:

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