如何使用 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上的文档。