jQuery Mobile，無法正常工作的對話框

Question

我看不到為什么該對話框不起作用。 我正在使用jqm 1.3

<a href="#foo" data-rel="dialog">Open dialog</a>

<div id="foo" data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Dialog</h1>
    </div>
    <div data-role="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="dialog/index.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
        <a href="dialog/index.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
    </div>
</div>

我加了“頭”

<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js>

和其他jqm事件正在運行。

Answer 1

您需要包裝您的錨標簽，該標簽會在頁面div中調用對話框，如下所示。

<div data-role="page">
    <div data-role="content">
<a href="#foo" data-rel="dialog">Open dialog</a>
    </div>
</div>

<div id="foo" data-role="dialog">
    <div data-role="header" data-theme="d">
        <h1>Dialog</h1>
    </div>
    <div data-role="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="dialog/index.html" data-role="button" data-rel="back" data-theme="b">Sounds good</a>       
        <a href="dialog/index.html" data-role="button" data-rel="back" data-theme="c">Cancel</a>    
    </div>
</div>

您可以在Live Fiddle上查看示例