By default, dialog pages in jQuery mobile are almost full screen with a black background.
This works reaonably well on a phone, but with a larger screen you expect something more like the dialogs in a desktop application - the original page should visible in the background.
At the same time, the dynamic loading features of jQuery mobile are really useful, so a seperate dialog plugin isn’t an option.
I put together a solution for this a while ago (https://github.com/jquery/jquery-mobile/pull/2380) , but it involved a custom build of a jQuery mobile beta which was stopping me from using the latest version. The code below is a much improved version - it works with the latest version and doesn’t require modifications to the jQuery mobile scripts.
The basic approach to fixing the dialogs is:
- Make the dialog overlay transparent
- When opening a dialog, add the class
ui-dialog-backgroundto the previous page that prevents it from being hidden
- remove the class when the dialog closes
For multi page sites you will also need to set the
data-dom-cache attribute on the background page to prevent it being removed from the DOM while still visible.