Programmatically load dialog in jQuery Mobile?

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 an开发者_开发技巧y 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?

---

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

---

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".

---

Please note that jquery dialogs require that there be data-role content and header divs for the styling to be applied appropriately. This will give you the full dialog with the close button in the header.

<div data-role="dialog" id="dialog" >
<div data-role="header"><h3>Oops!</h3></div>
<div data-role="content">
    <p>You done screwed up, partner!</p>
</div>

</div>