創建一個對話框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

回答

相關問題