如何关闭和覆盖 jQuery Mobile 模态对话框？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6399248/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to close and overlay jQuery Mobile modal Dialog?
提问by ace
I display dialog box via jquery mobile alpha 4 with ajax like:
我通过带有ajax的jquery mobile alpha 4显示对话框，例如：
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.
当点击 html 页面中的某些文本（不是锚标记）时，上面的代码会导致对话框很好地过渡到它的外观，javascript 将点击事件绑定到该文本。
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.
当单击 Try Again 按钮时，我必须通过 javascript 处理此问题，这将使对话框关闭（除其他事项外，它需要执行），并且在显示对话框之前显示的内容页面现在再次显示。这意味着它不应导致任何页面重新加载，并且对话框不应成为浏览历史记录的一部分。
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.
如果你能告诉我如何让 jquery mobile Dialog 出现在覆盖在 html 页面顶部的屏幕的一部分，并且 html 页面内容变暗或某种透明效果，那将是另一个重要的好处？目前对话框占据了整个屏幕。
回答by Phill Pafford
Live Example: http://jsfiddle.net/ReMZ6/4/
现场示例：http: //jsfiddle.net/ReMZ6/4/
HTML
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
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);
});
回答by coudron
The closest thing to what you're looking for is probably jtsage's jquery-mobile-simpledialog
最接近你正在寻找的东西可能是 jtsage 的jquery-mobile-simpledialog
http://dev.jtsage.com/#/jQM-SimpleDialog/
http://dev.jtsage.com/#/jQM-SimpleDialog/
HTML:
HTML：
<p>You have entered: <span id="dialogoutput"></span></p>
<a href="#" id="dialoglink" data-role="button">Open Dialog</a>
JavaScript:
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"
}
}
})
})
回答by Ishank
I found $('.ui-dialog').dialog('close');works to close a dialogue through a JS.
我找到$('.ui-dialog').dialog('close');了通过 JS 关闭对话的作品。
And, $.mobile.changePage('#pageID', {transition: 'pop', role: 'dialog'});to Display POP Dialog.
并且，$.mobile.changePage('#pageID', {transition: 'pop', role: 'dialog'});显示 POP 对话框。
回答by J.T.Sage
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:
我并不肯定我完全按照你的想法去做，但是，要通过 javascript 关闭对话框，你需要做的就是调用：
$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/
至于在同一个“页面”上弹出对话框，我猜你指的是 jQM 选择列表的行为？如果是这样，据我所知，这是不可能的 - 为此我实际上编写了自己的对话框版本，可以在此处找到演示：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.
如果我完全没有抓住重点，请告诉我，我会看看是否可以添加一些见解。
