JQuery Dialog不起作用

时间:2014-12-08 09:55:20

标签: jquery jquery-ui dialog

我正在尝试在我的网站中实现一个JQuery Dialog,询问用户是否真的要删除一个项目。

但是下面的代码不起作用,它只是没有显示对话框onclick。 这是我的代码:

脚本

$(function() {
        $( "#delete" ).dialog({
            autoOpen: false, 
            modal: true,
            buttons: {
                DELETE: function() {$(this).dialog("close");},
                CANCEL: function() {$(this).dialog("close");}
            },
        });
        $( ".delete-action" ).click(function() {
            $( "#delete" ).dialog( "open" );
        });
    }); 

HTML

<div id="delete" title="Delete" style="display: inline-block">
</div>
<button id="pass" class="delete-action"><img src="$base/includes/img/icons/16/trash.png" style="width: 16px; height: 16px;"/></button>

包括+ css

<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"    rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
    .ui-widget-header,.ui-state-default, ui-button{
    background:#b9cd6d;
    border: 1px solid #b9cd6d;
    color: #FFFFFF;
    font-weight: bold;
    }
</style>

以下是jsfiddle的链接:Code

任何人都可以提供一些帮助,因为我不知道如何解决它:(我在谷歌搜索了很多,也在StackOverflow上搜索,因为有很多类似于我的问题,但没有一个解决方案有效对我来说

感谢您的帮助,问题解决了,所提供的代码是最新的

1 个答案:

答案 0 :(得分:2)

您应该将按钮移动到用于创建对话框的div之外

<div id="delete" title="Delete" style="display: inline-block">
</div>
<button class="delete-action">Open</button>

http://jsfiddle.net/u2o5gn62/11/