How to position popup at top of screen or fixed at top in jquery mobile?

Question

I have a popup in jquery mobile

<div data-role="popup"   id="itemDetails">
...
</div>

and I call programmatically to open with:

$('#itemDetails').popup('open');

, but always open centered in x,y on screen, and I want show fix to top (y=0) of screen, and fixed when I have scroll.

How I can do it?, Thanks in advance.

Solution 1

Something like CSS should be enough:

#itemDetails{
  position:fixed;
  top:0px;
}

If you really want to use jQuery, then

$('#itemDetails').css({position:'fixed',top:'0'});

Solution 2

The solution did not work for me. Putting the css in the .css file did not take effect. I found that I needed to use the second type with:

$("#popupBasic").popup('open');
$('#popupBasic').css({position:'fixed',top:'10px',left:'30px','display':'block'});

then to close the popup:

$('#popupBasic').popup('close');
$('#popupBasic').css({display:'none'});

Comments

[AmGates]

Set the top property in css to 0

[ManuParra]

Finally your solution help me fine, but then I have used popup options: $('#itemDetails').popup('open',{y:0}) works fine too.

[ManuParra]

And I put in AndroidManifest.xml: android:windowSoftInputMode="adjustNothing" , and with it, don't happend strange things, positioning popup's

[frenchie]

Ok, I'm not familiar with Android but looks like you've got it to work; congrats!