单击链接时jquery mobile打开对话框答案

【问题标题】：jquery mobile open dialog on click of a link单击链接时jquery mobile打开对话框
【发布时间】：2012-01-13 20:08:20
【问题描述】：

我有一个关于对话框的问题，这里是代码：

<a href="#lol" data-rel="dialog">Filter</a>

<div data-role="dialog" id="lol">
<p><input type="button" value="lolz"/></p>
</div>

所以我猜点击“过滤器”，我应该得到一个带有按钮的对话框，对吗？我读过一些帖子和论坛，他们都说要这样做，但对我来说它不起作用。萤火虫没有错误，没有任何反应。有什么想法吗？

【问题讨论】：

这看起来像是这篇文章的副本：stackoverflow.com/questions/6230460/…
有什么想法？有什么问题？

标签： jquery jquery-mobile

【解决方案1】：

您没有发布您的问题到底是什么，但这里有一些一般准则。

您需要确保您的代码结构正确。 <a data-rel="dialog"> 标签嵌套在 data-role="content" 中，而 data-role="content" 又嵌套在 data-role="page" 元素中，并且 data-role="dialog" 元素是 data-role="page" 元素的兄弟：

<div data-role="page">
    <div data-role="content">
        <a href="#lol" data-rel="dialog">Filter</a>
    </div>
</div>

<div data-role="dialog" id="lol">
    <div data-role="content">
        <p><input type="button" value="lolz"/></p>
    </div>
</div>

这是一个演示：http://jsfiddle.net/kz5QA/

【讨论】：

不能那样做。它位于 MVC3 中的一个部分之下，对话框应显示另一个部分。这一切都包含在一个 data-role="page" 中。
我的理解（我也经常使用 jQuery Mobile）是你不能这样做。 page 或 dialog 元素必须是 <body> 标签的直接子元素。这是您的结构的演示：jsfiddle.net/kz5QA/1（不会打开对话框），这是我建议的结构的演示：jsfiddle.net/kz5QA（按预期工作）
你不能像这样把你的部分放在一起吗？ <div data-role="page>...</div><div data-role="dialog">...</div>
它仍然会被包裹在另一个“页面”中，所以它不会工作。所以，我必须得到新的视图，这将在我的 _Layout 之外，并将这个部分的模型传递给它。感谢您的帮助，至少现在我知道问题所在了。

【解决方案2】：

如果你想从 html 代码打开对话框，那么你必须在 DIV 中使用，你想从按钮单击中使用它 - data-role="page" 而不是你在那里所做的 data-role="dialog"。

并且要从任何事件中从 javascript 打开对话框，我建议使用如下代码：

$.mobile.changePage('#divSelectorId', { 过渡：'流行'，改变哈希：真， role: 'dialog' //重要的给予。 });

【讨论】：