如何关闭和覆盖jQuery Mobile模式对话框？

Question

我通过jquery mobile alpha 4和ajax显示对话框,如:

在成功回调中:

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

当点击html页面中的某些文本(而不是锚标记)时,上面的代码会导致对话框很好地过渡到它的外观,javascript绑定了click事件.

现在在对话框中我有如下代码:

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

单击"再试一次"按钮时,我必须通过javascript处理此问题,这应该使对话框关闭(以及其他需要做的事情),并且在显示对话框之前显示的内容页面现在再次显示.这意味着它不应该导致任何页面重新加载和对话框不应该是浏览历史记录的一部分.

如果你能告诉我如何让jquery移动对话框出现在html页面顶部的屏幕的一部分,html页面内容变暗或某种透明效果,那将是另一个大的好处？目前Dialog占据了整个屏幕.

Answer 1

实例: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); 
});