Popup

Home Search

Popup

The popup plugin has the following options:

corners boolean

default: true

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

$( ".selector" ).popup({ corners: false });
history boolean

default: true

Sets whether to alter the url when a popup is open to support the back button. Also exposed as a data attribute: data-history="false"

$( ".selector" ).popup({ history: false });
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";
});
overlayTheme string

default: null

Sets the color scheme (swatch) for the popup background, which covers the entire window. If not explicitly set, the background will be transparent.

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

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

positionTo string

default: "origin"

Sets the element relative to which the popup will be centered. It has the following values:

"origin" When the popup opens, center over the coordinates passed to the open() call (see methods page).
"window" When the popup opens, center in the window.
jQuery selector When the popup opens, create a jQuery object based on the selector, and center over it. The selector is filtered for elements that are visible with ":visible". If the result is empty, the popup will be centered in the window.

This option is also exposed as a data attribute: data-position-to="window"

shadow boolean

default: true

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

$( ".selector" ).popup({ shadow: false });
theme string

default: null

Sets the color scheme (swatch) for the popup contents. Unless explicitly set to 'none', the theme for the popup will be assigned the first time the popup is shown by inheriting the page theme or, failing that, by the hard-coded value 'c'. If you set it to 'none', the popup will not have any theme at all, and will be transparent.

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

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

tolerance string

default: "30,15,30,15"

Sets the minimum distance from the edge of the window for the corresponding edge of the popup. By default, the values above will be used for the distance from the top, right, bottom, and left edge of the window, respectively.

You can specify a value for this option in one of four ways:

  1. Empty string, null, or some other falsey value. This will cause the popup to revert to the above default values.
  2. A single number. This number will be used for all four edge tolerances.
  3. Two numbers separated by a comma. The first number will be used for tolerances from the top and bottom edge of the window, and the second number will be used for tolerances from the left and right edge of the window.
  4. Four comma-separated numbers. The first will be used for tolerance from the top edge, the second for tolerance from the right edge, the third for tolerance from the bottom edge, and the fourth for tolerance from the left edge.

transition string

default: "none"

Sets the default transition for the popup. The default value will result in no transition.

If the popup is opened from a link, and the link has the data-transition attribute set, the value specified therein will override the value of this option at the time the popup is opened from the link.