Programmatically load dialog in jQuery Mobile?

Question

I am trying to create dialogs in jQuery Mobile that appear when you click the google maps marker.

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

I have part of the way 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 with style and data:

• A full screen dialog box will appear. Is there a way to do this on a partial screen, like the default jQuery Mobile dialogs , and how the About and Prefs dialogs on my home page ?
• There is no close link in the title, which again is in the default jQuery mobile dialog . Can I guarantee that this appears if I do not add it manually?
• In the dialog box .live(), how can I get the data that I passed to him?

Answer 1

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

Answer 2

Since beta 1 , to get divto display as a dialog, use the attribute data-role="dialog"on divinstead data-role="page".

Answer 3

, jquery , . .

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