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

查看示例

Jquery Mobile，没有工作对话框

1 个答案: