Modal

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.


                            

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-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

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.