如何使用jquery mobile在頁面內創建對話框？

Question

這是我的代碼。我動態地構建了20個問題。所以我需要爲它們中的每一個創建一個對話框。這是一個使用jquery mobile構建的移動應用程序。所以我更喜歡使用jquery移動對話功能。

我知道肯定它可以完成，只是不知道如何。

<div data-role="page" id="Survey"> 

<div class="quest"> 
    @Html.DisplayFor(modelItem => item.Text)<div class="quest_com"> 
    <a href="#dialog-@Html.DisplayFor(modelItem => item.Id)" data-rel="dialog" data-transition="flip">Comments</a></div> 
</div> 


<div data-role="page" id="dialog"> 
      <div data-role="header"> 
       <h1> 
        Dialog</h1> 
      </div> 
      <div data-role="content"> 
       <div class="center-wrap"> 
        <textarea style="width: 320px" title="Comments"> 

      </textarea><a data-rel="dialog" data-role="button">Save</a> 
       </div> 
      </div> 
</div> 

</div> 

Answer 1

你不能有一個嵌套在另一個頁面的page工作。你的20個問題應該被設置爲他們自己的jQuery Mobile頁面元素。

<div data-role="page" id="Survey"> 
... 
<a data-rel="dialog" href="question-dialog-1">Question 1</da> 
</div> 

<div data-role="page" id="question-dialog-1"> 
... 
</div> 

這裏是它在行動活生生的例子：http://jsfiddle.net/shanabus/ZfBvB/

這應該解決你在找什麼做的。

以下是關於jQuery Mobile dialogs的文檔。