Modal
Bootstrap 4 Modal with Material Design UI
Modal(known as Dialog in Material Design) is a small window that communicates information to the user and prompts them for a response.It inform users about critical information, required to make decisions, or perform multiple tasks within a process.
Bootstrap 4 Modal
Bootstrap 4 Modal is streamlined, but flexible, dialog that prompts with the minimum required functionality and smart defaults.
Bootstrap 4 only supports one modal window at a time. Nested modals aren’t supported as we believe them to be poor user experiences. Whenever possible, place the modal HTML in a top-level position to avoid potential interference from other elements.
Propeller Modal
Propeller Modal consists of Bootstrap 4 HTML and JS structure with Propeller customized classes and JS functions. Simply add .pmd-modal class besides the .modal class to acheive the look and feel based on material design standards..
Information Modal
Information Modal is a text oriented modal used majorly to provide more information on any topic like profile information of any user.
Alert Modal
Alert Modals are urgent interruptions, requiring acknowledgement, that inform the user about a situation. Alerts without title bars are generally used for asking a question or taking a confirmation before moving forward.
Alert With Title Bar
Alert with title bar modals are generally used to ask users for their permissions.
Thank you Modal
Thank you modal as the name suggests is used after the user successfully performs an action in a modal box like submitting a form or providing permission to access something.
Profile Modal
Profile modal as the name suggests is used to display the user profile or biodata in a modal box. Add .pmd-profile-modal class after .pmd-modal and the custom header structure to create a Profile Modal.
Modal with List
To display a list inside the modal, replace .modal-body with .pmd-modal-list in the containing <div> of your list for creating Propeller enhanced modal containing list. This kind of modal can used as a simple menu.
Modal List with Avatar
Modal List with Avatar displays a list of items with profile pictures. This kind of modal is majorly used to display list of users, list of followers etc.
Modal List with Icons
Modal List with Avatar displays a list of items with icons. This kind of modal is majorly used to display list of actions that can be performed on an item.
Form Modal
Create a Form Modal by simply placing the form elements inside the <div> containing class .modal-body.
Conditional Modal
Conditional Modals are generally used for selecting items from an available list.
Modal with Media
Add a div with class .pmd-modal-media inside .modal-content section to create a modal box that contains a media in it.
Scrolling Content Modal
Scrolling Content Modal can be used to display policies and terms and conditions in a modal box.
Vertically Centered Modal
Add .modal-dialog-centered class followed by .modal-dialog class to vertically center the modal.
Modal in different sizes
Modal box can be shown in small and large sizes. Add .modal-sm followed by .modal-dialog to create a small modal. Similarly, add .modal-lg followed by .modal-dialog to create a large modal. By default, the modal will appear in medium size.
Configuration Options
The Propeller CSS classes apply various predefined visual enhancements to the Modal Box. Use propeller classes to enhance your Bootstrap 4 modal/dialog. The table lists the available classes and their effects.
| Propeller Classes | Effect | Remark |
|---|---|---|
.pmd-modal |
Add this class to create a Propeller Modal. | Optional |
.pmd-modal-list |
Add this class to the wrapper containing a list within your modal. | Optional |
.pmd-modal-media |
Add this class to the wrapper containing a media image to be used in your modal. | Optional |
.pmd-profile-modal |
Add this class to the modal wrapper containing the class .pmd-modal. |
Optional |
.pmd-profile-modal-header-bg-img |
Add this class to the span tag wrapped by .modal-header to set the background image of the modal header in profile modal. |
Optional |
Methods
See here for more documentation on this.
| Method | Description |
|---|---|
$().modal(options) |
Activates your content as a modal. Accepts an optional options object. |
$().modal('toggle') |
Manually toggles a modal. |
$().modal('show') |
Manually opens a modal. |
$().modal('hide') |
Manually hides a modal. |
$().modal('handleUpdate') |
Manually readjust the modal’s position if the height of a modal changes while it is open (i.e. in case a scrollbar appears) |
$().modal('dispose') |
Destroys an element’s modal. |
Events
Bootstrap 4's modal class exposes a few events for hooking into modal functionality. See here for more documentation on this.
| Event Type | Description |
|---|---|
show.bs.modal |
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. |
shown.bs.modal |
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. |
hide.bs.modal |
This event is fired immediately when the hide instance method has been called. |
hidden.bs.modal |
This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). |
loaded.bs.modal |
This event is fired when the modal has loaded content using the remote option. |
