how to show a dialog in jQuery Mobile

Question

I have a toolbar in jquery mobile, made up of a bunch of links, which load "pop" modal dialog boxes on top of my javascript application.

Like this:

Info

Where the div with id="about" has a data-role="page". I'd like to open the same dialog from the code, perhaps as part of a button handler, but I can't find any way to do this.

This code does not work. It only shows the elements of the "about" page transparently ontop of my currect page (without styling). How do I do this?

$("#buttAbout").click(function () {
    $('#about').show();
    return false;
});

Answer 1

It looks like jQuery mobile's dialogs are quite different to jQuery UI. This should do what you want:

$.mobile.changePage('#about','pop',false,true)

The documentation for changePage is here. Basically, the first argument is the string to find the page you want (can be an element id, jQuery object, or a page URL), second argument is the page transition, third is the direction of the transition (false for forwards, true for backwards), and the final argument is whether you want the page URL to update after the transition. I think you'll also need to make sure that the data-role attribute is correctly set to dialog on the div for your dialog, in order to ensure the correct history/styling behaviour.