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 Modal
Bootstrap Modal is streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
Propeller Modal
Propeller Modal consists of Bootstrap HTML and js structure with Propeller customized classes and js functions based on material design standards.
Modal with List
Create a modal that contain list of various types, such as, a simple list, list with profile view or list with icons. Replace .modal-body with .pmd-modal-list in the contaning <div> of your list for creating Propeller enhanced modal containing list.
Form Modal
Create a Modal with a form in it.
Modal with Media
Create a modal box that contains a media in it. Add a div with class .pmd-modal-media inside .modal-content section.
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 modal/dialog. The table lists the available classes and their effects.
| Propeller Classes | Effect | Remark |
|---|---|---|
.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-modal-action |
Add this class to the wrapper containing action icon buttons in your modal. | Optional |
Events
Bootstrap'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. |