Cannot close dialog page, $.mobile.back() does not close my dialog.

Cannot close dialog page, $.mobile.back() does not close my dialog.

Hi:

I used the old version 1.3.2, when i do
$(elem).dialog("close")

it works.

Now I am trying to move to version 1.4.2 and dialog widget will be removed. so i am trying to use the new method to create and close dialogs. Here is my code

var dialog = $("<div data-role='page' data-dialog='true'></div>").appendTo(document.body);
    var header = $("<div data-role='header'></div>").appendTo(dialog);
    var content =$("<div class='ui-content'></div>").appendTo(dialog);

var temp = $("<div style='text-align:center'></div>").appendTo(content);
    var button = $("<input type='button' class='ui-btn ui-btn-inline ui-icon-action ui-btn-icon-right' value='Close Button'/>").appendTo(temp);
   
    temp = $("<div style='text-align:right'></div>").appendTo(content);
    $("<a href='#' data-role='button' data-icon='delete' data-iconpos='right' data-rel='back'>Cancel</a>").appendTo(temp);

$(button).on("vclick", function(e){$.mobile.back();});

    var config = {dialog:true,
                  corners:true,
                  domCache:false,
                  closeBtn:"right",
                  closeBtnText:"Close",
                  theme:"b",
                  overlayTheme:"a"};
   $(dialog).on("pagehide", function(){
        $(dialog).remove();
    });
   $(dialog).page(config);
config = {allowSamePageTransition:true,
                  changeHash:true,
                  data:null,
                  reload:true,
                  showLoadMsg:false,
                  transition:"slide",
                  type:"GET"};

    $.mobile.pageContainer.pagecontainer("change", dialog, config);

Now I am just tring to have three ways to close a dialog, the close button put there by jquery mobile,
have a link with data-rel="back", and calling $.mobile.back();

According to the documentation, all three ways should close the dialog. but at the moment, nothing closes the dialog.
i have tried changeHash:false, reload:false, etc. still nothing works.

somehow i think jQuery mobile is trying to go to the page before the page that opens the dialog. for example, if i do a page reload through
      jQuery.mobile.pageContainer.pagecontainer("change", window.location.href);
before i change to the dialog page, the closing works, but if i open the dialog again, it does not close.

i am a little baffled. i have seen similar problem (not entirely the same problem) on stack overflow where closing the dialog will reload the page that opened it. but am i doing something wrong? i am new to version 1.4.2.

Thanks a lot in advance.