Ivor Kovic
Ivor Kovic

Reputation: 53

Jquery mobile: How to show popup above a fixed footer?

How would I position a popup above a fixed footer, just like it is depicted in the attached image?

https://i.sstatic.net/dADjb.jpg

Thanks.

Upvotes: 2

Views: 2423

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Problem with jQuery Mobile popup is that x,y positioning is nit working correctly.

But we can cheat, take a look at this working example: http://jsfiddle.net/Gajotres/LSakj/

HTML :

<a href="#popup" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popup" data-transition="slidedown" data-position-to="#footer-test" data-theme="a" data-overlay-theme="e" data-history="true">
    <p>U slučaju hitnoće koristi ovaj izbornik!</p>
</div>

In this case, data position is set to footer id. Unfortunately this will place it over footer, so we need additional css to place it over footer.

CSS :

#popup {
    margin-bottom: 30px !important;
}

You should change this value to accommodate your popup height.

Upvotes: 1

Jorge Y. C. Rodriguez
Jorge Y. C. Rodriguez

Reputation: 3449

well if you are using all jquery base, you could use jGrowl to create the notifications, just with a bit of work you will get a nice result.

Upvotes: 0

Related Questions