jQuery Mobile - “页内”对话框弹出窗口

时间:2012-03-28 19:37:50

标签: jquery-mobile modal-dialog

我正在寻找一个有点光滑的解决方案来拥有"页内"我的一个JQM页面上的对话框。我试图避免离开页面,因为对话框弹出窗口是"查找"这有助于用户填充表单字段。我不想离开实际页面,以免丢失用户已输入的任何其他信息。

我的第一次尝试是使用simpledialog2插件,我在网站的其他部分使用弹出菜单。虽然它适用于基本链接,但它在较长的列表上变得非常笨重。当涉及到尺寸调整,特别是滚动时,感觉非常有限。

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

有谁知道如何实现此对话框弹出窗口以及我是否可以通过某种方式调用相同的方法?如果没有,有没有人知道专业的替代品,因为这样的"页内"对话框?

感谢任何帮助。

PS:我无法在JQM中使用多页面模板,因为该网站是作为一个Web应用程序构建的,我依赖于单个页面的AJAX加载,多页面模板没有#39 ;支持。

2 个答案:

答案 0 :(得分:5)

您在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的预览。所以我想如果你真的很耐心,你会得到你想要的东西。

答案 1 :(得分:0)

在这里,您需要弹出不可拒绝的,而不是对话框。

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

现在在javascript调用中,

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