Setting JQueryMobile Popup's data-position using JavaScript

Question

$('#popupDiv').popup("open");

This programmatically opens a JQueryMobile pop up, but I want to know if it is possible to change or set my popup's settings, such as data-position and data-transition along with my code above. Thanks.

Answer 1

You can do:

$('#popupDiv').popup("open", {positionTo: '#mydiv'});

'origin' is not working for me in version 1.2 though.

see: http://jquerymobile.com/demos/1.2.0/docs/pages/popup/methods.html

Answer 2

Straight from the jQuery Mobile Docs:

Positioning options By default, popups open centered vertically and horizontally over the thing you clicked (the origin) which is good for popups used as tooltips or menus. The framework also applies some basic collision detection rules to ensure that the popup will appear on-screen so the ultimate position may not always be centered over the origin.

For situations like a dialog or lightbox where the popup should appear centered within the window instead of over the origin, add the data-position-to attribute to the link and specify a value of window.

It's also possible to specify any valid selector as the value of position-to in addition to origin and window. For example, if you add data-position-to="#myElement" the popup will be positioned over the element with the id myElement.

<a href="#positionWindow" data-rel="popup" data-position-to="window" data-transition="slideup">

    <div data-role="popup" id="positionWindow">
        <p>I am positioned to the window.</p>
    </div>

You can add data-transition="slideup" (or the transition of your choice) to the link, as well as other positioning options outlined in the docs link at the top of my answer.