The Modal component is a dialog box or a popup window that displays on top of the page. Modals can be used as alert windows as well as for accepting some input values.
Example of a basic modal: For changing the position of the close button, we need to create a modal element. The below code will create a very basic modal.
Approach: In the above, you can observe a button with class = “close” inside the modal header. This button is used for closing the modal element. data-dismiss property is used to switch the display style of the modal element.
<button type="button" class="close" data-dismiss="modal"> × </button>
- × gives the cross icon.
- data-dismiss switches the display property of modal element from “block” to “none”.
- You can shift this button description from header to any location inside the entire modal division to move the close button, or you can declare your own extra close button.
Below are the implementation methods for the above steps.
Method 1: Move the button description.
Output: The button appears in the body section of the modal element since it is moved to the body section.
Method 2: Define your own close button using the data-dismiss property.
Output: A new close button is available in the modal footer section.
- How to open or close react-bootstrap modal pro-grammatically?
- Bootstrap 5 | Close button
- How to configure modal width in Bootstrap?
- Bootstrap 4 | Modal
- How to get the same behavior with confirm and bootstrap modal?
- How to use Bootstrap modal for YouTube videos and play automatically ?
- What does .modal('dispose') do in Bootstrap 4 ?
- How to use modal closing event in Twitter Bootstrap ?
- How to handle the modal closing event in Twitter Bootstrap?
- How to fit the image into modal popup using Bootstrap?
- Bootstrap 5 Modal
- How to pass data into a bootstrap modal?
- How to create a radio button similar to toggle button using Bootstrap ?
- How to change (-, +) symbol with a button in Bootstrap Accordion ?
- Bootstrap | Close Icon for dismissing content with Examples
- How to Automatically Close Alerts using Twitter Bootstrap ?
- How to close sidebar by default using Bootstrap ?
- Deesign a close button using Pure CSS
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.