JQuery Dialog - 仅在单击“X”按钮时执行代码

时间:2021-12-21 19:47:28

I have a dialog with two buttons (Yes-No). Each one triggers a function

我有一个带有两个按钮的对话框(是 - 否)。每一个都触发一个功能

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: function () {
            /*Do stuff when clicking yes*/
        }},{
            text: 'No',                
            click: function () {
                /*Do stuff when clicking no*/
            }}],
    close: function(ev, ui){
        /*Do stuff always when closing*/                 
    }
});

What I want to do is execute the same code as in the "No" button when you click the "X" button on top. So I put that code in the "close" function. But then the code is also executed when clicking "Yes".

我想要做的是当你单击顶部的“X”按钮时执行与“否”按钮相同的代码。所以我将该代码放在“关闭”函数中。但是单击“是”时也会执行代码。

How can I execute that code when clicking "X" but not when clicking "Yes"?

如何在单击“X”时执行该代码,而不是在单击“是”时执行该代码?

Thanks.

3 个解决方案

#1


define a function and call it when user clicks yes or closes dialog.

定义一个函数,并在用户单击是或关闭对话框时调用它。

 $('#divDialog').dialog({
          modal:true,
          width:450,
          resizable: false,          
          buttons: [{
                text: 'Yes',
                click: function () {
                    /*Do stuff when clicking yes*/
                    do_work();
                }},{
                text: 'No',                
                click: function () {
                    /*Do stuff when clicking no*/
          }}],
          close: function(ev, ui){
                     /*Do stuff always when closing*/                 
                    do_work();
                }
       });

function do_work() {
    ....
}

#2


All you need to do is to define a function and call it wherever needed, like below.

您需要做的就是定义一个函数并在需要的地方调用它,如下所示。

Demo@Fiddle

function myFunction() {
    alert ("I am clicked");
}

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: function() {}
    }, {
        text: 'No',                
        click: myFunction
    }],
    close: myFunction
});

#3


You can do that with declaring on function outside of the jQueryUI init :

你可以通过在jQueryUI init之外声明函数来做到这一点:

var onClick = function(ev, ui) {
    console.log(ev);
    if(ev.type == "click") {
        this.isYes = (ev.originalEvent.currentTarget.textContent == "Yes")
        $(this).dialog('close');
    } else {
        if(this.isYes){
            alert("Yes");
        } else {
            alert("No");
        }
    }
}

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: onClick
    },{
        text: 'No',                
        click: onClick
    }],
    close: onClick
});

jsFiddle

#1


define a function and call it when user clicks yes or closes dialog.

定义一个函数,并在用户单击是或关闭对话框时调用它。

 $('#divDialog').dialog({
          modal:true,
          width:450,
          resizable: false,          
          buttons: [{
                text: 'Yes',
                click: function () {
                    /*Do stuff when clicking yes*/
                    do_work();
                }},{
                text: 'No',                
                click: function () {
                    /*Do stuff when clicking no*/
          }}],
          close: function(ev, ui){
                     /*Do stuff always when closing*/                 
                    do_work();
                }
       });

function do_work() {
    ....
}

#2


All you need to do is to define a function and call it wherever needed, like below.

您需要做的就是定义一个函数并在需要的地方调用它,如下所示。

Demo@Fiddle

function myFunction() {
    alert ("I am clicked");
}

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: function() {}
    }, {
        text: 'No',                
        click: myFunction
    }],
    close: myFunction
});

#3


You can do that with declaring on function outside of the jQueryUI init :

你可以通过在jQueryUI init之外声明函数来做到这一点:

var onClick = function(ev, ui) {
    console.log(ev);
    if(ev.type == "click") {
        this.isYes = (ev.originalEvent.currentTarget.textContent == "Yes")
        $(this).dialog('close');
    } else {
        if(this.isYes){
            alert("Yes");
        } else {
            alert("No");
        }
    }
}

$('#divDialog').dialog({
    modal:true,
    width:450,
    resizable: false,          
    buttons: [{
        text: 'Yes',
        click: onClick
    },{
        text: 'No',                
        click: onClick
    }],
    close: onClick
});

jsFiddle