Programmatically load dialog in jQuery Mobile?

Question

I'm trying to create dialogs in jQuery Mobile that appear when you click on a Google Maps marker.

Sample URL: http://cyclestreets.darkgreener.com/location/ (scroll to a London, UK location to see markers).

I've got part of the way there, with this code:

 google.maps.event.addListener(map_marker, 'click', function() {
     $.mobile.changePage({ url: $("#photo"), data: "id=" + marker.id, type: "GET"}, 'pop', false, true);
 });

But, a few issues to do with styling and data:

1. The dialog that appears is full-screen. Is there any way I can make it part-screen, like the default jQuery Mobile dialogs, and like the About and Prefs dialogs on my home page?
2. There isn't a close link in the header - which again, there is in the default jQuery mobile dialog. Can I ensure this appears, short of adding it by hand?
3. In the dialog's .live() event, how can I pick up the data that I have passed to it?

Answer 1

function openPopup(element_id)
{
    $.mobile.changePage(element_id, { transition: "pop", role: "dialog", reverse: false } );
}

Answer 2

Since beta 1, to get a div to appear as a dialog, use the data-role="dialog" attribute on the div instead of data-role="page".