jquery - 如何关闭并覆盖 jQuery Mobile 模态对话框？

Question

我通过 jquery mobile alpha 4 使用 ajax 显示对话框，如下所示:

在成功回调中:

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

当单击 html 页面中的某些文本(不是 anchor 标记)时，JavaScript 绑定(bind)了单击事件，上面的代码会导致对话框很好地转换到其外观。

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

<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 mobile 对话框出现在覆盖 html 页面顶部的屏幕部分中，并且 html 页面内容变暗或某种透明效果，这将是另一个很大的优势？目前该对话框占据了整个屏幕。

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