jQuery Mobile Docs - Popup panels

# Popup panels

Home Search
Back to Popups

## Overlay panels

Taking customization further, here is an example of a popup that has been customized to look like a vertical panel with three mini buttons:

Open panel

Here is the HTML markup for the button and panel:

    <a href="#popupPanel" data-rel="popup" data-transition="slide" data-position-to="window" data-role="button">Open panel</a>

    <div data-role="popup" id="popupPanel" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0">

        <button data-theme="a" data-icon="back" data-mini="true">Back</button>
        <button data-theme="a" data-icon="grid" data-mini="true">Menu</button>
        <button data-theme="a" data-icon="search" data-mini="true">Search</button>

    </div>

To style the panel, and attach it to the right edge, the following CSS is used. Note that `#popupPanel-popup` is the ID of the container div generated by the framework.

    #popupPanel-popup {
        right: 0 !important;
        left: auto !important;
    }
    #popupPanel {
        width: 200px;
        border: 1px solid #000;
        border-right: none;
        background: rgba(0,0,0,.5);
        margin: -1px 0;
    }
    #popupPanel .ui-btn {
        margin: 2em 15px;
    }

Because the popup container is positioned absolute, you can't make the panel full height with `height:100%;`. This small script sets the height of the popup to the actual screen height.

    $( "#popupPanel" ).on({
        popupbeforeposition: function() {
            var h = $( window ).height();

            $( "#popupPanel" ).css( "height", h );
        }
    });

### More in this section

- Pages & Dialogs
- Anatomy of a page
- Single page template
- Multi-page template
- Page titles
- Linking pages
- Page transitions
- Page loading widget
- Dialogs
- Popups
- Prefetching & caching pages
- Ajax, hashes & history
- Dynamically Injecting Pages
- Scripting pages
- PhoneGap apps
- touchOverflow feature
- Theming pages