Question

In my jQuery Mobile site, I have a button in my header like this:

<a href="/foo.html" data-rel="dialog" data-icon="grid">Foo</a>

The problem is that JQM expects me to redefine the head with all the scripts and CSS. This is so awkward especially for a dialog (not to mention slow). I would like my dialog just to have the content of my grid without having to redefine a full blown html page. Is this possible?

Answer 1

You could define the dialog in the same page ( multi-page layout )

• http://jsfiddle.net/cJyYb/

HTML

<div data-role="page" id="thePage">
    <div data-role="content">
        <a href="#theDialog" data-rel="dialog">Open dialog</a>
    </div>
</div>

<!-- Add the dialog here -->
<div data-role="dialog" id="theDialog">
    <div data-role="header" data-theme="d">
        <h1>Dialog</h1>
    </div>

    <div data-role="content" data-theme="c">
        <h1>Delete page?</h1>
        <p>This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and <code>data-rel="dialog"</code> attribute.</p>
        <a href="#thePage" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
        <a href="#thePage" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
    </div>
</div>

Docs:

• http://jquerymobile.com/demos/1.1.0/docs/pages/page-dialogs.html
• http://jquerymobile.com/demos/1.1.0/docs/pages/page-anatomy.html