Closing dialogs in multipage template

Question

Trying to work out how to close a dialog and return to the calling page (where the page is a div within a multipage template).

The dialog defaults to the first page div (back button) or # (x button) - I need it to close and remain on the referring page/div.

Tried this:

$('#dialog').live('pagehide', function (e) {
    $.mobile.changePage("#full-map");
});

but I still get a flick back to #index before transitioning to #full-map. Is there any where I can intercept the close function itself?

I trigger the dialog like so, on clicking a Google map marker:

google.maps.event.addListener(marker, 'click', function () {
    $.mobile.changePage("#dialog", {
        transition: "pop",
        reverse: false,
        changeHash: false,
    });
});

Answer 1

You are missing role:dialog? Full api here

$.mobile.changePage( "#myDialog", { role: "dialog" } );

I think this will keep the site from scrolling back to the main page, also you can add button and close the dialog with javascript instead of relying on default dialog close button.

$( "#myDialog" ).dialog( "close" );