Documentation

- Introduction
- Getting started
- Navigation
- Layout, Grid & Cartons
- Welcome screen
- Themes
- UI elements
- Update System
- Notifications
- Modals
- Tooltips
- Animations
- Charts
- Editor
- Gallery
- Icons
- Tables
- Error pages
- Maps & Location
- iPhone web app
- Licenses & Attributions

# Modals

I wrote a very lightweight modal script for use with Pastel - it's simple and beautiful.

To create a modal, use this snippet:

    $.fn.modal({
        url: "ajax.html"
    })

It will have the default theme, width, height and animation. Or you can simply pass an object like this:

    $("#modalcontent").modal();

Everything is easily changeable with the following parameters:

- theme: "light" (string) - change the theme of the modal. Can be either: light, dark, blue or you own custom CSS class.
- width: undefined (integer) - set a width. Don't add px or %.
- height: undefined (integer) - set a width. Don't add px or %.
- layout: undefined (string) - if set to "elastic", the modal will be elastic. If not set every width and height will be in pixels.
- url: undefined (string) - load url into modal. Same domain only.
- content false (string) - if a object was not passed or an url not set, you can set your HTML content.
- padding undefined (string) - set padding of modal. This time remember px or %.
- animation undefined (string) - set CSS3 animation. See the Animations page for a full overview of available animations.

## Complete example

    $.fn.modal({
        theme:      "dark",
        width:      80,
        height:     40,
        layout:     "elastic",
        url:        undefined,
        content:    "<strong>HTML</strong> content",
        padding:    "100px",
        animation:  "fadeInDown"
    })