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

Bootstrap Modal is streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.

Alerts inform the user about a situation or action that requires their confirmation or acknowledgement before proceeding. They differ slightly in appearance based upon the severity and impact of the message conveyed.

## Use Google's location service?

Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.

Would you like to proceed?

## Propeller Modal

Propeller Modal consists of Bootstrap HTML and js structure with Propeller customized classes and js functions based on material design standards.

Alerts inform the user about a situation or action that requires their confirmation or acknowledgement before proceeding. They differ slightly in appearance based upon the severity and impact of the message conveyed.

## Use Google's location service?

Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.

Would you like to proceed?

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

## Listing

- Cras justo odio
- Dapibus ac facilisis inDapibus ac facilisis in Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros

## Avatar List

- Porta ac consectetur ac
- Dapibus ac facilisis in
- Porta ac consectetur ac

## Icon Listing

- mood Cras justo odio
- notifications
  Dapibus ac facilisis in
- person_add
  Morbi leo risus
- share
  Porta ac consectetur ac
- drive_eta
  Vestibulum at eros

## Form Modal

Create a Modal with a form in it.

## Form Modal

Name Input is required!
Email Address
Mobile No.
Message
Accept Terms and conditions

### List Selection

Ahmedabad
Surat
Rajkot
Vadodara
Mehsana

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

### Two-line item

Secondary text
Cards provide context and an entry point to more robust information and views. Don't overload cards with extraneous information or actions.

## Title goes here

Secondary text
Cards provide context and an entry point to more robust information and views. Don't overload cards with extraneous information or actions.

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

### Two-line item

Secondary text
Cards provide context and an entry point to more robust information and views. Don't overload cards with extraneous information or actions.

### Two-line item

Secondary text
Cards provide context and an entry point to more robust information and views. Don't overload cards with extraneous information or actions.

### Two-line item

Secondary text
Cards provide context and an entry point to more robust information and views. Don't overload cards with extraneous information or actions.

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