Show modal javascript

Bootstrap modal box is a UI component that displays content overlaid on the main page.

Create it by defining a trigger button with data attributes and structuring the modal in HTML with a unique ID, allowing customization of content and functionality.

Syntax:

<div class="modal"> Contents...

<div>

The following approaches will be used to build the basic modal, which is described below:

modal dynamically.

Bootstrap modal cdn

You can create an instance of the Modal class and use its methods to display or hide the modal. You can also attach event listeners to buttons or elements to activate the modal upon user interactions.

Syntax:

// Create an instance of the Modal class
let myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal.show();
myModal.hide();

Example:

Output:

Approach 2: By implementing the Data Attribute

Bootstrap provides the option to trigger a modal using data attributes directly in the HTML.

You can add the data-bs-toggle attribute

bootstrap modal show using javascript

bootstrap modal show hide javascript