CODEWITHSUNDEEP
htmljquery-mobilepopup
JetPro
JetPro

Reputation: 1054

Setting JQueryMobile Popup's data-position using JavaScript

$('#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.

Upvotes: 4

Views: 18075

Answers (3)

Mr Heelis
Mr Heelis

Reputation: 2556

yeah the right way to do this is use event.target like this

$('#popup').off('taphold').on('taphold', function (e) {
     $('#popupDiv').popup("open", e.target);
});

incidentally, this code then places a popup if you tap hold the button and a click event is like this would mean a normal click still works

 $('#popup').on('tap', function (){
     var url = $(this).attr('url');
     window.open( url, '_parent');              
 });

nb: I added "url='google.com'" to the markup and made href='#'

Upvotes: 1

adamdehaven
adamdehaven

Reputation: 5920

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.

Upvotes: 2

gmh04
gmh04

Reputation: 1351

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

Upvotes: 19

Related Questions