单击按钮关闭对话框 - JQuery UI

时间:2012-07-23 17:06:30

标签: jquery jquery-ui

我尝试创建一个关闭"对话框" JQuery UI中的窗口。

要使用此代码打开对话框:

$(".show .edit_site").click(function (){
    rel = $(this).attr("rel");

    $("#dialog_edit").dialog({
            modal: true,
            open: function () {
                $(this).load("<?= site_url()?>/sites/show_update?id="+rel+"&mode=popup");
            },
            close: function() {
                //some code
            },
            height: 370,
            width: 900,
            title: 'Some title'
     });
}); 

对话框打开,一切都很好。 但现在问题是如何通过单击对话框内的按钮来关闭对话框?

enter image description here 谢谢大家,对不起我可怕的英语:)


我尝试了所有可能的解决方案,这是唯一为我工作的解决方案:

function close_dialog()
{
    //Close jQuery UI dialog 

    $(".ui-dialog").hide();
    $(".ui-widget-overlay").hide();
}

3 个答案:

答案 0 :(得分:14)

这很简单,只需将按钮添加为对话框选项的一部分:

$("#dialog_edit").dialog({
    modal: true,
    open: function () {
        $(this).load("<?= site_url()?>/sites/show_update?id="+rel+"&mode=popup");
    },
    height: 370,
    width: 900,
    title: 'Some title',
    buttons: {
        'button text' : function() {
            $(this).dialog('close');
        }
    }
});

答案 1 :(得分:9)

您可以使用'close'方法:

$("#dialog_edit").on('click', '#closeButtonId', function(){
     $(this).closest("#dialog_edit").dialog('close');
});

答案 2 :(得分:-1)

我尝试了下面的代码并且有效

 $('#btnClose').click(function () {
     window.parent.jQuery('#msgbox').dialog('close');
 });