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-background to 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.