Question

是否可以在同一页面内使用内联内容创建jQuery Mobile dialog？

例如：

<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>

典型的对话框要求链接对象的href是单独的“页面”的href，或者是当前页面旁边的href：

<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>

但是，我的模板结构禁止我将链接与模态内容分开。如果可能的话，我想将模块化的东西保存在一个可插拔的控件中。使用我当前的CMS框架（Sitecore）为模式内容创建一个全新的外部页面会很麻烦。

Answer 1

无法找到可靠的跨平台解决方案。
但是Jquery Mobile 1.2具有“弹出”功能，因此任何div都可以轻松显示为弹出窗口。 http://jquerymobile.com/test/docs/pages/popup/index.html

Answer 2

jQueryMobile - SimpleDialog2允许内联对话 http://dev.jtsage.com/jQM-SimpleDialog/demos2/

<a href="#" id="opendialog" data-role="button">Open Dialog</a>


  <div id="inlinecontent" style="display:none"   data-options='{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}'>

<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>
<a rel='close' data-role='button' href='#'>Close</a>
 </div>

$(document).delegate('#opendialog', 'click', function() {
// NOTE: The selector is the hidden DIV element.
$('#inlinecontent').simpledialog2();
})

内联内容的对话可能吗？

2 个答案: