所有页面的jQuery移动全局弹出窗口

Question

How can I have global(common) popup for all pages in one html file???
I try this one. but not working...

<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>

Answer 1

If you're using jQuery Mobile 1.4.1

Documentation says that you can reuse the same popup on multiple pages if you declare it as a direct child of the body element. It can then appear on any page in the document:

<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>

If you define the popup outside of any page, then you must take care to instantiate the popup widget yourself. You can do this as early as DOMReady, because the popup is not on any page:

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

If you wish the popup to be opened from a set of links, then you must also handle that manually, because automatic handling via data-rel="popup" is restricted to popups on the active page.

If you're using older versions of jQuery Mobile

Short answer is that you can't. The documentation states that:

A popup div has to be nested inside the same page as the link

So you'd have to copy and paste the popup to every page you want it to appear, which doesn't sound like a good solution.

When I need something that behaves like a global popup I usually go with a dialog , which can be opened from any page.

The dialog itself has the same structure as a page:

<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>

And you can open it programatically:

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

Or with the click of a button as any other jQuery mobile page:

<a href="#diag" data-role="button" data-rel="dialog" data-theme="a">Open dialog</a>

Answer 2

Take a look at this response

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

There is a plugin that could help you while the jquery mobile team add support for popups defined outside the page they are used in. Notice the live demo does not work, but in local and replacing the jquery js it works.

This is the jqm request:

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

Apparently it could be added within jqm 1.4