How can I create an overlay box using jQuery mobile

Question

I know that I can create a jQuery mobile overlay which loads content from another page.

Can I create an overlay manually to display a message to the user? Something sexier than the standard JS alert box?

Update

Instead of saying

<a href="my_message.html" data-rel="dialog">Show Message</a>

I want to say something like:

$.showDialog("Hello world!");

Answer 1

To point you in the right direction:

Related:

• http://jquerymobile.com/demos/1.0rc1/docs/pages/page-dynamic.html

Live Example:

• http://jsfiddle.net/UrdE6/11/
• http://jsfiddle.net/UrdE6/12/ (with function)
• http://jsfiddle.net/UrdE6/32/ (with page navigation)

JS:

var originalMessage = $('#the-content').html();
var dynamicMessage  = '<span>This is a dynamic message</span>'; // add dynamic content here

$('#dynamic').click(function() {
    $('#generic-dialog').live('pagebeforeshow',function(event, ui) {
        $('#the-content').html(dynamicMessage).trigger('create');
    }); 
});

$('#original').click(function() {
    $('#generic-dialog').live('pagebeforeshow',function(event, ui) {
        $('#the-content').html(originalMessage).trigger('create');
    });
});

HTML:

<div data-role="page" id="home">
    <div data-role="content">
        <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" id="tasks">
            <li data-role="list-divider">Dynamic Dialog</li>
            <li><a href="#generic-dialog" data-rel="dialog" id="original">Show Original Dialog</a></li>
            <li><a href="#generic-dialog" data-rel="dialog" id="dynamic">Show Dynamic Dialog</a></li>
        </ul>
    </div>
</div>

<!-- This is a page used for a dialog -->
<div data-role="page" id="generic-dialog">

    <div data-role="header" data-theme="d">
        <h1>Dialog</h1>
    </div>

    <div data-role="content" data-theme="c" id="the-content">
        <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="#" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
        <a href="#" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
    </div>
</div>

Answer 2

Whilst this is almost a year late but is still as yet unanswered according to the OP's comments I thought I'd add my 2 cents. With jQuery Mobile 1.2.0 at least you can achieve this from the same page.

Here is a fiddle for this http://jsfiddle.net/z775f/3/

All that was added was to add this as the HTML

<div data-role="dialog" id="pageLoadDialog" data-theme="a">
            <div data-role="content" data-theme="a">
                Here is some demo text.
            </div>
</div>

Important to note that this sits outside of any other tags as though the dialog were a "page" of its own.

Then I added a JS function to simulate conditional logic to display or edit the contents of the dialog.

function onPageLoad(showDialog) {
    if(showDialog){
            $('#pageLoadDialog').dialog();
            $.mobile.changePage('#pageLoadDialog', { transition: "none"} );
    }
}

Finally a call to that function with a boolean value to show the dialog on "pageload" which in a real environment could be added to the body or document's onload event.

onPageLoad(true);

All other code was forked from Phill Pafford's fiddle except updating the jQuery Mobile JS and CSS references to the new 1.2.0 RC 1 version.

Hopefully this can helps someone as it's not immediately clear how to do this from the same page as the jQuery Mobile examples on the topic reference an external .html