How to close and overlay jQuery Mobile modal Dialog?

Question

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

Answer 1

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); 
});

Answer 2

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"
      }
    }
  })
})