9

如何在一个 html 文件中为所有页面提供全局（通用）弹出窗口？？？
我试试这个。但不工作...

<div data-role="page" id="home"></div>
<div data-role="page" id="news"></div>
<div data-role="page" id="details"></div>
<div data-role="popup" id="settings" data-corners="false" data-theme="none" data-shadow="false" data-tolerance="0,0"></div>
4

2 回答 2

22

如果您使用的是 jQuery Mobile 1.4.1

文档说，如果您将其声明为 body 元素的直接子元素，则可以在多个页面上重用相同的弹出窗口。然后它可以出现在文档的任何页面上：

<div id="popup-outside-page" data-theme="a">
    <!-- This popup has its theme explicitly defined via data-theme="a"
         because it has no parent from which to automatically inherit
         its theme -->
    <ul data-role="listview">
        <li>Global Menu</li>
        <li><a href="#demo-intro">Intro Page</a></li>
        <li><a href="#other-page">Other Page</a></li>
        <li><a href="#third-page">Third Page</a></li>
    </ul>
</div>
<div id="other-page" data-role="page" data-url="other-page">
    <div data-role="header">
        <a href="#popup-outside-page" data-rel="popup">Menu</a>
        <h1>Another Page</h1>
    </div>
    <div role="main" class="ui-content">
        <p>This is another page that can be reached using the links in the global menu.</p>
    </div>
</div>
<div id="third-page" data-role="page" data-url="third-page">
    <div data-role="header">
        <a href="#popup-outside-page" data-rel="popup">Menu</a>
        <h1>Third Page</h1>
    </div>
    <div role="main" class="ui-content">
        <p>This is a third page that can be reached using the links in the global menu.</p>
    </div>
</div>

如果您在任何页面之外定义弹出窗口，那么您必须注意自己实例化弹出窗口小部件。您可以早在 DOMReady 时执行此操作，因为弹出窗口不在任何页面上：

// Instantiate the popup on DOMReady, and enhance its contents
$( function() {
    $( "#popup-outside-page" ).enhanceWithin().popup();
});

如果您希望从一组链接中打开弹出窗口，那么您还必须手动处理，因为通过data-rel="popup"进行的自动处理仅限于活动页面上的弹出窗口。

如果您使用的是旧版本的 jQuery Mobile

简短的回答是你不能。该文件指出：

弹出 div 必须嵌套在与链接相同的页面内

因此，您必须将弹出窗口复制并粘贴到您希望它出现的每个页面，这听起来不是一个好的解决方案。

当我需要一些类似于全局弹出窗口的东西时，我通常会使用一个对话框，它可以从任何页面打开。

对话框本身具有与页面相同的结构：

<div id="diag" data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Info</h1>
    </div>
    <div data-role="content" data-theme="c">
        <h1>Thank you for your time!</h1>
        <a data-role="button" data-rel="back">Ok</a>
    </div>
</div>

您可以以编程方式打开它：

$.mobile.changePage("#diag");

或者像任何其他 jQuery 移动页面一样单击按钮：

<a href="#diag" data-role="button" data-rel="dialog" data-theme="a">Open dialog</a>
于 2012-10-21T13:00:42.733 回答
-2

看看这个回复

https://stackoverflow.com/a/12092465/591254

有一个插件可以帮助您，同时 jquery 移动团队添加对在使用它们的页面之外定义的弹出窗口的支持。请注意，现场演示不起作用，但在本地并替换 jquery js 时它可以工作。

这是 jqm 请求：

https://github.com/jquery/jquery-mobile/issues/4565

显然它可以在 jqm 1.4 中添加

于 2013-04-11T08:58:52.463 回答