创建一个对话框 JQuery Mobile
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6101370/
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
Creating a dialog JQuery Mobile
提问by Stanley Cup Phil
I am trying to create a dialog with Jquery mobile. I have tried to refer to the accepted answer in this SO questionbut it didn't work for me.
我正在尝试使用Jquery mobile. 我试图参考这个 SO 问题中接受的答案，但它对我不起作用。
Here is my code:
这是我的代码：
<div data-role="page" id="first">
<!-- Code -->
<div id = "dialog" data-rel="dialog">
<div id = "errorText"></div>
<button id = "closeDialog">OK</button>
</div>
</div>
And here is the JS to make it (inside a function):
这是实现它的 JS（在函数内）：
//Nothing checked. Cannot continue. Add error message to div
$('#errorText').html("You must check the checkbox next to \"I Agree\" to continue");
//Open Dialog
$('#dialog').dialog();
When the code to create the dialog is reached nothing happens. Suggestions?
当到达创建对话框的代码时，什么也没有发生。建议？
回答by Tim Niblett
The dialog should be a separate page div which you can load via Ajax or include in your HTML. Here is an example.
该对话框应该是一个单独的页面 div，您可以通过 Ajax 加载或包含在您的 HTML 中。这是一个例子。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Sample</h1>
</div>
<div data-role="content">
<p></p>
<p><a href="dialog.html" data-rel="dialog" data-role="button">Is this a question?</a></p>
</div>
</div>
<div data-role="page" data-url="dialog.html">
<div data-role="header">
<h1>Dialog</h1>
</div>
<div data-role="content">
<p>Is this an answer?</p>
</div>
</div>
</body>
</html>
回答by Homer
This worked for me, from the "Local, internal linked "pages"" section of http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html
这对我有用，来自http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html的“本地、内部链接的“页面”部分
http://jsfiddle.net/homer2/ra7Hv/
http://jsfiddle.net/homer2/ra7Hv/
<div data-role="page" id="foo">
<div data-role="header">
<h1>
Foo
</h1>
</div><!-- /header -->
<div data-role="content">
<p>
I'm first in the source order so I'm shown as the page.
</p>
<p>
View internal page called <a href="#bar" data-rel="dialog">bar</a>
</p>
</div><!-- /content -->
<div data-role="footer">
<h4>
Page Footer
</h4>
</div><!-- /footer -->
</div><!-- /page -->
<!-- Start of second page -->
<div data-role="page" id="bar">
<div data-role="header">
<h1>
Bar
</h1>
</div><!-- /header -->
<div data-role="content">
<p>
I'm second in the source order so I'm not shown as the page initally.
</p>
<p>
<a href="#foo">Back to foo</a>
</p>
</div><!-- /content -->
<div data-role="footer">
<h4>
Page Footer
</h4>
</div><!-- /footer -->
</div><!-- /page -->
回答by omeralper
Just this,
只是这个，
<div data-role="popup" id="popupDialog" data-overlay-theme="a">
Hello world
</div>
$('#popupDialog' ).popup('open');
回答by gsilvestrin
You could use
你可以用
$('#errorText').html("You must check the checkbox next to \"I Agree\" to continue");
$.mobile.changePage('dialog', 'slide', false, false);
More info on http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/pages/docs-navmodel.html
有关http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/pages/docs-navmodel.html 的更多信息
回答by Leonardo Oliva
I did a generic dialog which opens from JavaScript. I hope this will help you.
我做了一个从 JavaScript 打开的通用对话框。我希望这能帮到您。
HTMLcode:
HTML代码：
<div data-role="page" id="genericDialog">
<div data-role="header" ><h3 id="genericDialogHeader"></h3></div>
<div data-role="content" id="genericDialogContent"></div>
</div>
And JavaScriptcode:
和JavaScript代码：
function openDialog (title,body) {
//Setting values
$("#genericDialogHeader").html(title);
$("#genericDialogContent").html(body);
//Showing the generic dialog
$.mobile.changePage( "#genericDialog", { role: "dialog" } );
}
