Question

I’m trying to have a global popover with some alerts in it in jQuery Mobile. Is that possible? It seems like the popover has to be in a jquery mobile page for it to be accessed. I’m assuming it’s because everything outside of that page isn’t visible.

Here’s an example of what I’m talking about. How do I get the second version to work?

Works

<div data-role="page" data-theme="a">
    <div data-role="content">

        <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>

        <div data-role="popup" id="alert-popup" data-theme="c">
            <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
            <h1>Alert Title</h1>
            <p>
                Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy.
            </p>
        </div>

    </div>
</div>

Doesn’t work

<div data-role="page" data-theme="a">
    <div data-role="content">

        <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>

    </div>
</div>



<div data-role="popup" id="alert-popup" data-theme="c">
    <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
    <h1>Alert Title</h1>
    <p>
        Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy.
    </p>
</div>

Answer 1

You are correct, please see here:

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

<div data-role="page" data-theme="a">
    <div data-role="content">
        <a href="#alert-popup" data-rel="popup" data-role="button" data-inline="true">Popup with close button right</a>
    </div>
    <div data-role="popup" id="alert-popup" data-theme="c">
        <a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
        <h1>Alert Title</h1>
        <p>
            Freegan thundercats raw denim adipisicing elit. 8-bit hella lomo do irony, sartorial aliquip wes anderson. Elit quinoa consectetur hoodie, bushwick 3 wolf moon godard eiusmod next level quis echo park. Keytar ullamco exercitation salvia, brunch before they sold out cray minim echo park polaroid vegan cliche reprehenderit vero synth. Artisan VHS fanny pack aliqua ex williamsburg duis. Reprehenderit chillwave skateboard post-ironic, food truck ethical est wes anderson letterpress incididunt master cleanse. Selvage farm-to-table elit vinyl jean shorts, consectetur delectus non banksy.
        </p>
    </div>
</div>

EXAMPLE