JQUERY-ui对话框x按钮功能

问题描述 投票:0回答:3

我正在使用 jquery-ui 对话框。 我的问题是单击 x 按钮关闭对话框后,我还需要执行 cancel() 函数。

我该怎么做?

var content = 
{
    autoOpen    : false,
    modal       : true,
    width       : 350,
    minHeight   : 50,
    height      : 350,
    position    : "center",
    resizable   : false,
    draggable   : false,
    close       : function () {$(".privacy_modal").prop("checked", false);},
    buttons: 
    {
        "Cancel": function cancel() 
        { 
            $(".privacy_modal").prop("checked", false); $(this).dialog("close"); 
        },
        "Accept": function accept() 
        {
            $(".privacy_modal").prop("checked", true); $(this).dialog("close"); 
        }
    }
};

TEST

注意:使用 close 并不能解决我的问题,因为当我单击接受按钮时它会覆盖该函数

jquery jquery-ui jquery-ui-dialog
3个回答
8
投票

您可以使用第三方变量(bAccepts 默认为 False)和第三方方法。

当用户接受时:

  • 将 bAccepts 设置为 True

当用户取消时:

  • 将 bAccepts 设置为 False

当 onClose 被触发时,调用 doClose() 方法,该方法执行以下操作:

  • 如果 bAccepts 为 True => 接受
  • 否则=>取消

这是一些未经测试的伪代码。请参阅工作代码

var bAccepts = false;
var content = {
                    autoOpen    : false,
                    modal       : true,
                    width       : 350,
                    minHeight   : 50,
                    height      : 350,
                    position    : "center",
                    resizable   : false,
                    draggable   : false,
                    close       : function () { if (bAccepts) {...} else {...} },
                    buttons: {
                        "Cancel": function cancel() { bAccepts = false; $(this).dialog("close");},
                        "Accept": function accept() { bAccepts = true; $(this).dialog("close");}
             }
};

3
投票

工作演示 http://jsfiddle.net/Ea6Hm/1/

您可以使用:http://docs.jquery.com/UI/Dialog#event-beforeClose

使用

beforeClose
您可以在对话框关闭之前调用您想要调用的任何函数。

希望这有帮助,

代码

$(document).ready(function() {
    $('#theLink').click(function() {
        $("#forgot-dialog").dialog("open");
    });

    $("#forgot-dialog").dialog({
        modal: true,
        autoOpen: false,
        height: 255,
        width: 300,
        beforeClose: function() {
            alert("Do whatever before Close");
        },
        buttons: {
            "Retrieve": function() {
                document.forms["forgotform"].submit();
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        },
    });


});​

0
投票

对于 beforeClose,您需要检查 X 是否被单击,否则它也会被“确定”按钮触发,

beforeClose: function (e, ui) {
    if ($(e.currentTarget).hasClass('ui-dialog-titlebar-close'))
        e.preventDefault();
}
© www.soinside.com 2019 - 2024. All rights reserved.