jQuery mobile global popup for all pages

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>