如何使用jQuery mobile创建叠加框

Question

我知道我可以创建一个jQuery移动覆盖,从其他页面加载内容.

我可以手动创建叠加层以向用户显示消息吗？比标准的JS警报盒更性感？

更新

而不是说

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

我想说的是:

$.showDialog("Hello world!");

Answer 1

指出正确的方向:

有关:

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

实例:

• http://jsfiddle.net/UrdE6/11/
• http://jsfiddle.net/UrdE6/12/(带功能)
• http://jsfiddle.net/UrdE6/32/(带页面导航)

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>