Javascript 如何在 jQuery Mobile 中显示对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6286548/
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 show a dialog in jQuery Mobile
提问by Gerry
I have a toolbar in jquery mobile, made up of a bunch of links, which load "pop" modal dialog boxes on top of my javascript application.
我在 jquery mobile 中有一个工具栏，由一堆链接组成，这些链接在我的 javascript 应用程序顶部加载“弹出”模式对话框。
Like this:
像这样：
Where the div with id="about" has a data-role="page". I'd like to open the same dialog from the code, perhaps as part of a button handler, but I can't find any way to do this.
其中 id="about" 的 div 有一个 data-role="page"。我想从代码中打开同一个对话框，也许作为按钮处理程序的一部分，但我找不到任何方法来做到这一点。
This code does not work. It only shows the elements of the "about" page transparently ontop of my currect page (without styling). How do I do this?
此代码不起作用。它只在我的当前页面上透明地显示“关于”页面的元素（没有样式）。我该怎么做呢？
$("#buttAbout").click(function () {
$('#about').show();
return false;
});
回答by Timothy Jones
It looks like jQuery mobile's dialogs are quite different to jQuery UI. This should do what you want:
看起来 jQuery mobile 的对话框与 jQuery UI 完全不同。这应该做你想做的：
$.mobile.changePage('#about','pop',false,true)
$.mobile.changePage('#about','pop',false,true)
The documentation for changePage is here. Basically, the first argument is the string to find the page you want (can be an element id, jQuery object, or a page URL), second argument is the page transition, third is the direction of the transition (false for forwards, true for backwards), and the final argument is whether you want the page URL to update after the transition. I think you'll also need to make sure that the data-roleattribute is correctly set to dialogon the div for your dialog, in order to ensure the correct history/styling behaviour.
changePage 的文档在这里。基本上，第一个参数是查找您想要的页面的字符串（可以是元素 id、jQuery 对象或页面 URL），第二个参数是页面转换，第三个是转换的方向（向前为假，为真为向后），最后一个参数是您是否希望页面 URL 在转换后更新。我认为您还需要确保在对话框的 div 上data-role正确设置该属性dialog，以确保正确的历史记录/样式行为。
