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 is streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.
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
.pmd-modal-list in the contaning <div> of your list for creating Propeller enhanced modal containing list.
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
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.
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.
||Add this class to the wrapper containing a list within your modal.||Optional|
||Add this class to the wrapper containing a media image to be used in your modal.||Optional|
||Add this class to the wrapper containing action icon buttons in your modal.||Optional|
Bootstrap's modal class exposes a few events for hooking into modal functionality. See here for more documentation on this.
||This event fires immediately when the
||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
||This event is fired immediately when the
||This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).|
||This event is fired when the modal has loaded content using the