What is the use of the modal Class in Bootstrap?

Last Updated : 16 Feb, 2024

The .modal class in Bootstrap is utilized to create modal dialogs, which are overlay windows that appear on top of the webpage content to present important information or actions.

Important Points

The .modal class is applied to an <div> element to define the structure of the modal dialog.
It provides pre-defined styles and functionality to create modal windows with standardized appearance and behavior.
Modal dialogs created using the .modal class can contain various content types, including text, forms, images, or other HTML elements.

Syntax:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" 
aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <!-- Modal content goes here -->
    </div>
  </div>
</div>

Explanation: The provided syntax creates a modal dialog in Bootstrap, where the .modal class is applied to a <div> element. It includes the necessary attributes and structure to define the modal’s appearance and behavior, facilitating the display of important information or actions in an overlay window on top of the webpage content.

Features:

Overlay Window: The .modal class creates a semi-transparent overlay window that appears on top of the webpage content, focusing users’ attention on the modal content.
Dynamic Behavior: Modal dialogs can be triggered to open or close dynamically using JavaScript, providing interactive and responsive user experiences.
Accessibility: Bootstrap modal dialogs adhere to accessibility standards, ensuring that they are accessible to users with disabilities and compatible with screen readers.

P

pankaj_gupta_gfg

Improve

What is the use of the list-group Class in Bootstrap?

Similar Reads

How to disable click outside modal to close modal in bootstrap ?

Bootstrap is a very powerful, extensible, and feature-packed fronted toolkit which is used to build fast and responsive websites. Bootstrap 5 provides us with its powerful Modal component which can be used to create models within the website at an ease. In this article, we are going to see how we can disable the click outside of the bootstrap modal

How to use Bootstrap modal for YouTube videos and play automatically ?

The task is to use modal for YouTube videos in Bootstrap. Here we will discuss two topics, embedding YouTube video in Bootstrap modal and make YouTube video auto-play in the Bootstrap modal. Embedding YouTube videos in the Bootstrap modal is very easy and simple to implement using the below approach. But there is a small problem when you close the

How to use modal closing event in Twitter Bootstrap ?

Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that's customizable and responsive. They can be used to display alert popups, videos, and images in a website. Bootstrap Modals are divided into three primary sections: header, body, and footer. Syntax: class | tabindex | role | aria-labelledby Approach: It shows the pop-up menu w

How to configure modal width in Bootstrap?

Bootstrap Modal: It is a dialog window that opens inside the browser window on triggering certain events. It is a really convenient way to improve the website's content rendering as per the requirements. In this article, we will focus on adjusting the width/height of the modal box.Method 1: Using pre-defined Bootstrap classes Bootstrap has pre-defi

Modal JavaScript plugin (bootstrap) with example

You can use Bootstrap's Javascript Modal plugin to create user notifications, lightboxes or custom content boxes. Example: <html> <head> <title>Modal example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesh

How to hide Bootstrap modal with JavaScript?

This article will tell us how the bootstrap executes when the .modal (modal window) gets closed. At some point of time, the modal window - whenever it gets opened (along with the class modal), it is going to get closed. As soon the modal has got finished, after being getting hidden from the user, the event will be fired up. The function will get ex

Bootstrap 4 | Modal

In simple words, the Modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal's backdrop automatically closes the modal. Also, it must be kept in mind that Bootstrap doesn't support nested modals as they create bad UI experience for the user. Theref

How to get the same behavior with confirm and bootstrap modal?

Bootstrap modal: In simple words, the Modal component is a dialog box/popup window that is displayed on top of the current page, once the trigger button is clicked. However, clicking on the modal’s backdrop automatically closes the modal. Also, it must be kept in mind that Bootstrap doesn’t support nested modals as they create bad UI experience for

What does .modal('dispose') do in Bootstrap 4 ?

In Bootstrap 4, .modal('dispose') is a function defined to destroy the modal. The modal remains a part of the DOM even after using .modal('dispose'), this function only destroys the current instance of the modal component. Syntax: $("#modalID").modal("dispose"); Example: This example illustrates the use of .modal('dispose') method. When the dispose

How to handle the modal closing event in Twitter Bootstrap?

Modal Closing Event in Twitter Bootstrap | Set 1 Prerequisite Knowledge: Bootstrap 4 | Modal Twitter Bootstrap’s modal class offer a few events that are fired at the standard Bootstrap modal class. Bootstrap Modals offer a lightweight, multi-purpose JavaScript popup that is customizable and responsive. They can be used to display alert popups, vide

Article Tags :