来自内联内容的对话框可能吗？答案

【问题标题】：Dialog from inline content possible?来自内联内容的对话框可能吗？
【发布时间】：2011-12-02 10:20:03
【问题描述】：

是否可以在同一页面中使用内联内容创建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是一个单独的“页面”，或者位于当前页面旁边的一个：

<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）为模式内容创建一个全新的外部页面会很麻烦。

【问题讨论】：

标签： jquery templates layout jquery-mobile modal-dialog

【解决方案1】：

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

【讨论】：

【解决方案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();
})

【讨论】：