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>