jQuery Mobile - “页内”对话框弹出答案

【问题标题】：jQuery Mobile - "in-page" dialog popupjQuery Mobile - “页内”对话框弹出
【发布时间】：2012-03-28 19:37:50
【问题描述】：

我正在寻找一种巧妙的解决方案，以便在我的一个 JQM 页面上有一个“页内”对话框。我试图避免离开页面，因为对话框弹出是一种“查找”，可以帮助用户填充表单字段。我不想离开实际页面，以免丢失用户已经输入的任何其他信息。

我的第一次尝试是使用 simpledialog2 插件，我在网站的其他部分使用它来显示弹出菜单。虽然它适用于基本链接，但它在较长的列表中变得非常笨重。在调整大小，尤其是滚动方面，感觉非常有限。

我有点喜欢长多选对话框弹出的内置 JQM 实现。给你一个想法，看看这个jsfiddle

有谁知道这个对话框弹出是如何实现的，我是否可以以某种方式调用相同的方法？如果没有，是否有人知道这种“页内”对话框的替代方案？

感谢任何帮助。

PS：我不能在 JQM 中使用多页模板，因为该站点是作为 Web 应用程序构建的，并且我依赖于单个页面的 AJAX 加载，而多页模板不支持。

【问题讨论】：

标签： jquery-mobile modal-dialog

【解决方案1】：

您在 jsfiddle 中说明的对话框可以在其自己的页面中轻松调用。您可以将 data-rel="dialog" 放在锚标记 <a href="dialog.html">dialog</a> 中，也可以将 data-role="dialog" 添加到页面容器中。这是一个例子

dialog.html

<div data-role="dialog">
    <div data-role="header">
        <h1>Header</h1>
    </div>
    <div data-role="content">

    </div>
    <div data-role="footer">
        <h1>Footer</h1>        
    </div>
</div>

还请注意，他们正计划生成我相信您在 JQM v 1.2 中寻找的页面内对话框。这是http://filamentgroup.com/tests/popup/docs/pages/popup/index.html 的预览。所以我想如果你真的有耐心，你会得到你想要的。

【讨论】：

我知道我可以将对话框称为新页面，但这会留下当前页面，我想避免这种情况（因为在表单中输入的所有数据都会丢失）。但是，您答案的第二部分正是我想要的。我没有太多时间等待，但我可能只是实施一个临时解决方案并等待 JQM 1.2 的发布。非常感谢您提供的信息。
您可以通过将 data-dom-cache="true" 添加到页面容器中来将上一页保留在 dom 中。这样你仍然可以使用 javascript 来更新你的表单。
我不明白为什么对话框不像弹出窗口那样工作，因为您不必更改页面所以容易得多。（并丢失所有用户表单数据）

【解决方案2】：

在这里，您需要一个不可关闭弹出窗口而不是对话框。

<div data-dismissible="false" data-role="popup" id="myPopup">
  <span>Content...</span>
</div>

现在在 javascript 调用中，

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

【讨论】：