创建一个对话框JQuery Mobile

我想用Jquery mobile创建一个对话框。我试图参考已接受的答案in this SO question，但它对我无效。创建一个对话框JQuery Mobile

这里是我的代码：

<div data-role="page" id="first"> 
    <!-- Code --> 
    <div id = "dialog" data-rel="dialog"> 
     <div id = "errorText"></div> 
     <button id = "closeDialog">OK</button> 
    </div> 
</div>

这里是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();

当达到创建对话框的代码没有任何反应。建议？

来源

2011-05-23 Stanley Cup Phil

对话框

$('#errorText').html("You must check the checkbox next to \"I Agree\" to continue"); 
$.mobile.changePage('dialog', 'slide', false, false);

更多信息应该是一个单独的页面的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>

来源

2011-05-24 07:48:13

这不适合我使用测试版的工作。 – Homer 2011-06-30 14:46:45

你可以使用上http://jquerymobile.com/demos/1.0b1pre/#/demos/1.0b1pre/docs/pages/docs-navmodel.html

来源

2011-05-24 00:06:43 gsilvestrin

这个工作对我来说，从 “本地，内部链接 ”网页“，” 节的http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

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

来源

2011-06-30 16:23:13 Homer

如果对话框页面与主页面嵌入在同一个html文件中，那么您需要使用对话框的id（在这种情况下为#bar）作为按钮的锚点href。否则，如果您使用url，jQM将尝试使用AJAX检索对话框 - 如果该对话框不包含在该URL所表示的文件中，将会失败。 – 2011-12-24 17:29:55

就在今年，

<div data-role="popup" id="popupDialog" data-overlay-theme="a"> 
       Hello world 
</div> 

$('#popupDialog').popup('open');

来源

2013-08-31 19:18:33 omeralper

我做从JavaScript打开的通用对话框。我希望这能帮到您。

HTML代码：

<div data-role="page" id="genericDialog"> 
    <div data-role="header" ><h3 id="genericDialogHeader"></h3></div> 
    <div data-role="content" id="genericDialogContent"></div> 
</div>

而且JavaScript代码：

function openDialog (title,body) { 
    //Setting values 
    $("#genericDialogHeader").html(title); 
    $("#genericDialogContent").html(body); 
    //Showing the generic dialog 
    $.mobile.changePage("#genericDialog", { role: "dialog" }); 
}

来源

2016-10-08 18:03:35

创建一个对话框JQuery Mobile

回答

相关问题