Popup panels

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 );
    }
});