jQuery Mobile Docs - Popup

# Popup

Home Search

## Popup

- Basics
- Options
- Methods
- Events

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.

### 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