How to close and overlay jQuery Mobile modal Dialog?

I display dialog box via jquery mobile alpha 4 with ajax like:

Within the succes callback:

success:
$j('#wchkdiv').html(msg);
$j("#wchkdiv").dialog();
$.mobile.changePage($('#wchkdiv'), 'pop', false, true);

Above code causes the dialog to nicely transition into its appearance when some text in the html page is clicked on ( not anchor tag) to which javascript binds click event.

Now within the dialog I have code like:

<form id="gform" name="gform" class="formbody" method="post">
<input class="btns" type="button" onclick="return wchkSubmit(event,'tryAgain');" 
     name="tryAgain" value="Try Again"/>
<开发者_StackOverflow社区/form>

When Try Again button is clicked, I must handle this via javascript which should make the dialog close (among other things it needs to do), and the content page that was showing before the dialog was shown, is now showing again. That means it should not cause any page reloading and dialog box should not be part of browsing history.

It would be another big plus if you can show me how I can make jquery mobile Dialog to appear in part of the screen overlaying on top of html page with the html page content dimmed or some kind of transparency effect? Currently the Dialog takes up the whole screen.

Live Example: http://jsfiddle.net/ReMZ6/4/

HTML

<div data-role="page" data-theme="c" id="page1"> 
    <div data-role="content"> 
        <p>This is Page 1</p>
        <button type="submit" data-theme="a" name="submit" value="submit-value" id="submit-button-1">Open Dialog</button>
    </div>
</div>

<div data-role="page" data-theme="a" id="page2"> 
    <div data-role="content"> 
        <p>This is Page 2</p>
        <button type="submit" data-theme="e" name="submit" value="submit-value" id="submit-button-2">Close Dialog</button>
    </div>
</div>

JS

$('#submit-button-1').click(function() {
    $.mobile.changePage($('#page2'), 'pop', false, true); 
});

$('#submit-button-2').click(function() {
    alert('Going back to Page 1');
    $.mobile.changePage($('#page1'), 'pop', false, true); 
});

The closest thing to what you're looking for is probably jtsage's jquery-mobile-simpledialog

http://dev.jtsage.com/#/jQM-SimpleDialog/

HTML:

<p>You have entered: <span id="dialogoutput"></span></p>
<a href="#" id="dialoglink" data-role="button">Open Dialog</a>

JavaScript:

$('#dialoglink').live('vclick', function() {
  $(this).simpledialog({
    'mode' : 'string',
    'prompt' : 'What do you say?',
    'buttons' : {
      'OK': {
        click: function () {
          $('#dialogoutput').text($('#dialoglink').attr('data-string'));
        }
      },
      'Cancel': {
        click: function () { return false; },
        icon: "delete",
        theme: "c"
      }
    }
  })
})

I found $('.ui-dialog').dialog('close'); works to close a dialogue through a JS.

And, $.mobile.changePage('#pageID', {transition: 'pop', role: 'dialog'}); to Display POP Dialog.

I'm not positive I totally follow what you are trying to do, but, to close the dialog via javascript, all you need do is call:

$j("#wchkdiv").dialog('close');

As for making the dialog popup on the same "page", I am guessing you are referring to the behavior of the jQM select lists? If so, to the best of my knowledge, it isn't possible - to that end I actually wrote my own version of the dialog, the demo can be found here: http://dev.jtsage.com/jQM-SimpleDialog/

If I completely missed the point, please let me know and I'll see if I can add some insight.