Question

即时通讯使用jquery mobile。我试图创建一个弹出窗口。我发现这个simpel代码应该可行。 http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html

我尝试了示例中的代码

<a href="#popupBasic" data-rel="popup">Tooltip</a>

<div data-role="popup" id="popupBasic">
    This is a completely basic popup, no options set.
</div>

但是当我把它放在我自己的代码中时，div仍会显示，当我点击按钮时它会转到另一个页面，而不是弹出窗口。有人能帮助我吗？

Answer 1

嗯......我已经开始工作了（下面的示例代码，对不起那些混乱的字符串我不能让它显示在代码块中），但是我想知道你是怎么发现这个的页？？这似乎不是最新的jQuery Mobile候选版本的一部分...所以我的猜测是它不适合你，因为你的JS和CSS引用没有指向实际包含相应代码的文件？

<!DOCTYPE html>
<html class="ui-mobile-rendering">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <title>JQM popup test</title>
        <link rel="stylesheet"
            href="http://jquerymobile.com/branches/popup-widget/css/themes/default/jquery.mobile.css"/>
        <script src="http://jquerymobile.com/branches/popup-widget/js/jquery.js"></script>
        <script src="http://jquerymobile.com/branches/popup-widget/js/"></script>
    </head>
    <body>
        <a href="#popupBasic" data-rel="popup">Tooltip</a>
        <div data-role="popup" id="popupBasic">This is a completely basic popup, no options set.</div>
        <div>Other</div>
        <div>Random</div>
        <div>Text</div>
    </body>
</html>

Answer 2

似乎弹出窗口计划发布1.2版本（请参阅this page on github）。我认为url页面中的“分支”表示该页面来自jQuery mobile的未发布的dev分支。如果查看1.1版本的文档页面，则不会记录此功能。

可以通过添加前一个github链接中的jquery.mobile.popup.js和css来添加到1.0，或者使用包含弹出窗口小部件和其他窗口小部件的web-ui-fw project。

我使用web-ui-fw弹出jQuery mobile 1.1的弹出窗口;此插件使用“popupwindow”而不是“popup”作为data-rel和data-role

jquery手机弹出窗口无法正常工作？

2 个答案: