Popup

Popup

• Basics
• Options
• Methods
• Events

The popup plugin has the following options:

overlayTheme string

default: null

Sets the color scheme (swatch) for the popup border and background. If initially unset, and the popup is used in association with a link that has data-rel="popup" set, this attribute will be set when the popup is invoked from the link.

$('.selector').popup({ overlayTheme: "a" });

This option is also exposed as a data attribute: data-overlay-theme="a"

theme string

default: null

Sets the color scheme (swatch) for the popup contents. If initially unset, and the popup is used in association with a link that has data-rel="popup" set, this attribute will be set when the popup is invoked from the link.

$('.selector').popup({ theme: "a" });

This option is also exposed as a data attribute: data-theme="a"

initSelector CSS selector string

default: ":jqmData(role='popup')"

This is used to define the selectors (element types, data roles, etc.) that will automatically be initialized as popups. To change which elements are initialized, bind this option to the mobileinit event:

$( document ).bind( "mobileinit", function(){
   $.mobile.popup.prototype.options.initSelector = ".mypopup";
});

shadow boolean

default: true

Sets whether to draw a shadow around the popup. This option is also exposed as a data attribute: data-shadow="true"

$('.selector').popup({ shadow: true });

corners boolean

default: true

Sets whether to draw the popup with rounded corners. This option is also exposed as a data attribute: data-corners="true"

$('.selector').popup({ corners: true });

fade boolean

default: true

Sets whether the popup's background fades as the popup appears. This option is also exposed as a data attribute: data-fade="true"

$('.selector').popup({ fade: true });

transition string

default: $.mobile.defaultDialogTransition

Sets the transition to use as the popup appears. This option is also exposed as a data attribute: data-transition="pop"

$('.selector').popup({ transition: "pop" });