Popups can not be defined outside the page they're used in.

[AlexHowansky]

I'm not sure if this is a bug or the intended behavior, but at the very least it's inconsistent with the way dialogs work and rather limiting in the way it can be used. I'm hoping somebody can chime in and let me know what they think about this issue.

When building dialogs, I can put the dialog DIV outside the page DIV that uses it:

<div data-role="page" id="home">
    <div data-role="header">...</div>
    <div data-role="content">
        <a href="#dialog" data-role="button" data-rel="dialog">dialog</a>
    </div>
    <div data-role="footer">...</div>
</div>
....
<div data-role="dialog" id="dialog">
    ...
</div>

This allows me to pre-load all my static dialogs into a single HTML page, and then pull content DIVs which use those dialogs via AJAX. However, this same technique doesn't work with popups. The following code doesn't display the popup when the button is clicked:

<div data-role="page" id="home">
    <div data-role="header">...</div>
    <div data-role="content">
        <a href="#popup" data-role="button" data-rel="popup">popup</a>
    </div>
    <div data-role="footer">...</div>
</div>
....
<div data-role="popup" id="popup">
    ...
</div>

In order to get the popup to render, I need to put its DIV inside the page DIV that it will be rendered on:

<div data-role="page" id="home">
    <div data-role="popup" id="popup">
        ...
    </div>
    <div data-role="header">...</div>
    <div data-role="content">
        <a href="#popup" data-role="button" data-rel="popup">popup</a>
    </div>
    <div data-role="footer">...</div>
</div>

This has two implications:

1. I can't have multiple pages use the same popup -- I have to create multiple identical copies of the popup, one for each page.
2. I can't pull in the DIV for a new page via AJAX unless I also include all popup DIVs that the page might use.

Here are some fiddles for testing:

Dialog defined outside the page - http://jsbin.com/oravud
Popup defined outside the page - http://jsbin.com/axaqit
Popup defined inside the page - http://jsbin.com/uqojic

[johnbender]

@AlexHowansky

I'm under the impression that @gabrielschulhof is either working on this or supports it already. Hopefully he can comment here.

[jaspermdegroot]

@AlexHowansky

This functionality is certainly something we are going to look into. For multiple reasons that won't be right now so I am going to close this issue as a feature request and I added it here https://github.com/jquery/jquery-mobile/wiki/Feature-Requests

[serbanghita]

@AlexHowansky meanwhile check https://github.com/serbanghita/jQM-dynamic-popup , it's a small plugin I wrote that wraps around popup() method and allows you to use it the way you want. Tell me if you find it useful.

@uGoMobi i'm glad this request was added to the feature requests!

[DzenisevichK]

Will be good to have wrapper around popup to have something like system MessageBox but in html.

$.mobile.showMessage({ // or $.mobile.alert
    caption: "Caption",
    text: "Plain text",  // suggest to use "text-align: center" and "white-space: pre-wrap" for text container
    buttons: [{
        id: "ok",
        text: "OK",
        // other options from button widget
    }],
    theme: ...,
    onClose: function (buttonId) {}
})

[toddparker]

Opening so we can work on this

[jaspermdegroot]

Changed milestone from 1.3.0 to 1.4.0 according to the roadmap.

[jaspermdegroot]

I closed #4850 as duplicate.

Added labels "listview" because that is another widget (next to page.sections) that we have to refactor to make it work outside a page.

Update: removed "listview" label because there is a separate ticket for that (#5429).

[jaspermdegroot]

Closing as fixed by commit a8bc1c3

[frequent]

@uGoMobi: I'm not finding any documentation or examples on creating popups outside pages. Will try if it works and provide an example.

[serbanghita]

@frequent maybe the documentation I wrote on https://github.com/serbanghita/jQM-dynamic-popup helps.

[frequent]

@serbanghita - thx but this works as of JQM 1.4 and I'm happifly using it.

[serbanghita]

@frequent nice, this is why I like jQuery Mobile

[lloydjcenterofthewest]

im confused was this solved? i just tried in JQM 1.4.5 and if i have popups outside of page it doesnt work.

was the https://github.com/serbanghita/jQM-dynamic-popup added to JQM officially?

[Bmint910]

just want to report that this does indeed work well for JQM 1.4.5 when using a multipage template and even as a MultiHTML...https://stackoverflow.com/questions/30339216/how-to-get-popups-to-be-defined-outside-the-page-theyre-used-in