Question

Is it possible to create a jQuery Mobile dialog using inline content within the same page?

For example:

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

        <!-- this causes the entire current page to load as the dialog -->
        <a href="#modal" data-rel="dialog">Open Dialog<a> 

        <div id="modal" style="display: none">
            Hello World
        </div>

    </div>
</div>

A typical dialog requires that the href of the linking object be that of a separate “page”, or one that sits along side the current page:

<div data-role="page">
    <div data-role="content">
        <a href="#modal" data-rel="dialog">Open Dialog<a>
    </div>
</div>
<div data-role="page" id="modal">
    <div data-role="content">
        Hello World
    </div>
</div>

However, my template structure prohibits me from separating the link from the modal content. If possible, I would like to keep things modularized into a single pluggable control. Creating an entirely new external page for the modal content would be cumbersome using my current CMS framework (Sitecore).

Answer 1

Not able to find a solid, cross-platform out of the box solution.
But Jquery Mobile 1.2 is having ‘popup’ role, so any div can easily displayed as popup. http://jquerymobile.com/test/docs/pages/popup/index.html