Explain modal in Bootstrap 4
Modal is one of the components of Bootstrap 4 built with HTML, CSS, and JavaScript and is a lightweight, responsive JavaScript plugin used to add dialogs, user notifications, lightboxes, or just custom content to the site.
Important points to remember:
- Bootstrap supports only one modal per window, and nesting them is considered poor practice.
- Clicking on the backdrop of the modal will instantly close the modal.
- Modals need to be placed before any other content in the document and they remove the scroll of the body, so when we scroll the content of the model scroll.
- The reason we need to place modal at the top before any other content is because it makes use of position: fixed which could cause interference with other elements.
- Modals do not support the autofocus attribute of HTML, so we can use custom JavaScript instead.
Different components of modal:
Scrolling | If the content placed inside the modal becomes longer than the viewport of users then they scroll independently of the page within. |
Vertically-center | We add .modal-dialog-centered to .modal-dialog when we want to vertically center the modal. |
Tooltips and popovers | When modals are closed then any tooltips and popovers within would also be automatically dismissed |
Using the grids | We can use the bootstrap grid inside the modal by nesting the container-fluid inside of the modal-body class. |
Varying modal content | We can use the event.relatedTarget and HTML data-* attributes (via jQuery) to vary the contents of the modal depending on which modal was triggered. |
Remove Animation | For the modals which simply appear rather than fade into view, we could just remove the .fade class from the modal markup. |
Dynamic heights | If the height of a modal changes while it is triggered, to readjust the modal’s position in case of a scrollbar appearance, we could call $(‘#myModal’).modal(‘handleUpdate’). |
Size options | Modals have two optional sizes i.e. modal-lg, and modal-sm. |
Accessibility | For the accessibility of the modal component we need to make sure we use to add role=”dialog” and aria-labelledby=”…” as well as referencing the modal title to .modal, and role=”document” to the .modal-dialog itself. |
Embedding YouTube Video | Embedding YouTube Video: Embedding YouTube videos in modals requires additional JavaScript not in Bootstrap to automatically stop playback and more. |
Simple steps to create a modal:
- Create a trigger button.
- Create a modal component
Example 1: This example illustrate the creation of a basic simple modal in Bootstrap 4.
HTML
<!DOCTYPE html> < html > < head > < title >Bootstrap Modal Example!</ title > < meta charset = "utf-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 "> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" > < script src = "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body > < br > < br > < center > < button type = "button" class = "btn btn-success" data-toggle = "modal" data-target = "#exampleModal" > w3wiki! </ button > </ center > <!-- Modal --> < 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" > < div class = "modal-header" > < h5 class = "modal-title" id = "exampleModalLabel" > Title over here! </ h5 > < button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" >×</ span > </ button > </ div > < div class = "modal-body" > All the content! </ div > < div class = "modal-footer" > < button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close </ button > < button type = "button" class = "btn btn-primary" > Save changes </ button > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: This example illustrate creating modal using its different components in Bootstrap 4.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Bootstrap Example</ title > < meta charset = "utf-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 "> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" > < script src = "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" > </ script > </ head > < body > < br > < br > < center > < button type = "button" class = "btn btn-success" data-toggle = "modal" data-target = "#exampleModal" data-whatever = "@w3wiki1" > Open modal for @w3wiki1 </ button > < button type = "button" class = "btn btn-success" data-toggle = "modal" data-target = "#exampleModal" data-whatever = "@w3wiki2" > Open modal for @w3wiki2 </ button > < button type = "button" class = "btn btn-success" data-toggle = "modal" data-target = "#exampleModal" data-whatever = "@w3wiki3" > Open modal for @w3wiki3 </ button > < div class = "modal fade" id = "exampleModal" tabindex = "-1" role = "dialog" aria-labelledby = "exampleModalLabel" aria-hidden = "true" > < div class = "modal-dialog modal-dialog-centered" role = "document" > < div class = "modal-content" > < div class = "modal-header" > < h5 class = "modal-title" id = "exampleModalLabel" > New message from Beginner for Beginner! </ h5 > < button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close" > < span aria-hidden = "true" >×</ span > </ button > </ div > < div class = "modal-body" > < form > < div class = "form-group" > < p > Vertically centered, varying modal content & scrolling components are used! </ p > </ div > < div class = "form-group" > < label for = "message-text" class = "col-form-label" > Message: </ label > < p > w3wiki is a computer science portal for Beginner. It contains millions of articles on various topics from interview preparation, to a small topic or a subject. It provides various opportunities for anyone who wants to get hired. It's considered as one of the best platform for anyone who want to gain or share their knowledge and skills. The top achievements of w3wiki includes billions of users all over the world. Millions of articles have already been published, and thousands of people getting Hired by some of the top companies with their numbers still growing. </ p >< br > < p > w3wiki contains articles from old topics to new, and provides with a variety of services for you to learn, succeed and also to enjoy the process! Free tutorials and millions of articles are being provided over here, the live, Online and Classroom Courses are being provided. Frequent coding competition and webinars by industry experts as well as internship opportunities and job Opportunities are available. </ p > </ div > </ form > </ div > < div class = "modal-footer" > < button type = "button" class = "btn btn-secondary" data-dismiss = "modal" > Close </ button > < button type = "button" class = "btn btn-primary" > Save message </ button > </ div > </ div > </ div > </ div > </ center > </ body > </ html > |
Output:
Contact Us