'jQuery Mobile Popup keeps repositioning itself on scroll

I want to show a dialog on a jQuery mobile website such that:

  • It displays when the page loads
  • It shows the page behind it
  • It should be dismissible by clicking outside it

I decided to use jQuery mobile popup as follows:

  • Create a <div data-role="popup"> inside the page
  • Programmatically open the popup on pageshow event of the page

It does the job just fine. However, on mobile devices the popup moves around when the user scrolls the page. Upon scrolling, the popup would disappear for fraction of a second, then reappear at a different position, possibly trying to stay inside the viewport. This behavior is undesirable.

The code I am using is this:

https://gist.github.com/salmanarshad2000/4b84e00f061508780e82e5a7b61d617b

To view the gist in mobile browser:

https://gitcdn.link/repo/salmanarshad2000/4b84e00f061508780e82e5a7b61d617b/raw/demo.html

The expected behavior:

  • The popup opens at the top of the page, maintaining some gap on top, left and right
  • When the user scrolls the page, the popup scrolls with it
  • When the user stops scrolling, the popup remains where it was
jqueryjquery-mobilejquery-mobile-popup


Solution 1:[1]

First of all, the popup is repositioning itself on resize and on orientationchange, so I believe something is happening during the scroll mentioned in Your question, maybe it is due to a feature of the mobile device.

If You don't need that whole stuff, You can completely shut down the popup behaviour:

$(document).on("mobileinit", function () {
    $.widget("mobile.popup", $.mobile.popup, {
        _handleWindowResize: $.noop
    });
});

Be aware, this is a quick & dirty solution. The JQM team did a great job and spent a lot of time to test many different mobile devices, so my solution won't cover all cases - maybe it works just for Your requirements.

A note aside: the reposition in the middle of the window is a well-known bug. To adjust this, You may need to set the data-position-to attribute (or the positionTo option) and patch the _resizeTimeout function:

//this.reposition( { positionTo: "window" } );    
this.reposition( { positionTo: this.options.positionTo } );

Solution 2:[2]

I'm far from being an expert but I've tried to patch the method _handleWindowResize() of jquery.mobile-1.4.5.js by commenting off one condition among those that hide the popup. It seems to work fine until now :

if ( ( /* this._expectResizeEvent() || */ this._orientationchangeInProgress ) &&
                !this._ui.container.hasClass( "ui-popup-hidden" ) ) {
...

I'm not sure that does not produce issues elsewhere... :(

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Patrick V.

Related Questions