jQuery移动对话框没有关闭,因为它应该是默认情况下

时间:2013-04-18 15:29:13

标签: javascript jquery-mobile

具有以下对话框定义:

<div data-role="dialog" id="operator-delete" data-theme="b" data-title="Delete record">

    <div data-role="header" data-theme="b">
        <h2>Confirm deletion</h2>
    </div>

    <div data-role="content">
        <p><div id="delete-confirm">Do you really want to delete record?</div></p> 
        <table border="0" cellspacing="30" width=100%>
            <tr>
                <td valign="center" halign="left"><a href="#" id="delete-cancel" data-role="button" data-inline="true" data-theme="b" data-rel="back" data-icon="arrow-l">No</a></td>
                <td valign="center" halign="right"><a href="#" id="delete-confirm" data-role="button" data-inline="true" data-theme="b" data-icon="delete">Yes</a></td>
            </tr>
        </table>
    </div> <!-- /content -->
</div> <!-- /dialog -->

此对话框由jQuery按钮调用:

<a href="#operator-delete" data-rel="dialog" data-transition="pop" 
id="delete-user" data-role="button" data-inline="true" data-theme="b" data-icon="delete" class="ui-btn-right">Delete</a>

对话框出现,因为它是必需的,但没有对“否”按钮和对话框标题中的关闭按钮作出反应。同时jQuery doc说:“当在对话框中点击任何链接时,框架将自动关闭(!!!)对话框......”。我看到了jQuery示例源代码 - 他们没有进一步努力关闭示例对话框。 怎么了?

1 个答案:

答案 0 :(得分:1)

我实现了你的代码,但是我没有关闭对话框的任何问题。请检查小提琴。我觉得你的HTML结构有问题。

<div data-role="page">
    <div data-role="content">
            <a href="#operator-delete" data-rel="dialog" data-transition="pop" 
id="delete-user" data-role="button" data-inline="true" data-theme="b" data-icon="delete" class="ui-btn-right">Delete</a>
    </div>
</div>

<div data-role="dialog" id="operator-delete" data-theme="b" data-title="Delete record">
    <div data-role="header" data-theme="b">
         <h2>Confirm deletion</h2>

    </div>
    <div data-role="content">
        <p>
            <div id="delete-confirm">Do you really want to delete record?</div>
        </p>
        <table border="0" cellspacing="30" width=100%>
            <tr>
                <td valign="center" halign="left"><a href="#" id="delete-cancel" data-role="button" data-inline="true" data-theme="b" data-rel="back" data-icon="arrow-l">No</a>
                </td>
                <td valign="center" halign="right"><a href="#" id="delete-confirm" data-role="button" data-inline="true" data-theme="b" data-icon="delete">Yes</a>
                </td>
            </tr>
        </table>
    </div>
    <!-- /content -->
</div>
<!-- /dialog -->

http://jsfiddle.net/maheshsapkal/aeWAE/