是否可以将alertify.js的cancel按钮和onclose调用的操作分开

Is it possible to separate the actions called by the cancel button and the onclose for alertify.js

本文关键字：onclose 调用 操作 按钮 cancel alertify js 是否      更新时间：2023-09-26

我现在有这个：

            $('form#uwbhandler').on('click', function(e){
            e.preventDefault();
            alertify.confirm("Mode 1",
              function(){
                alertify.success('Sent: Success Something');
                socket.emit('send command', {data: 'acommand'});
              },
              function(){
                alertify.success('Sent: Something');
                socket.emit('send command', {data: 'bcommand'});
              }).setHeader('<em>Select Mode</em> ').setting('labels',{'ok':'Mode 1', 'cancel': 'Mode 2'}).set({onshow:null, onclose:function(){ alertify.message('confirm was closed.')}});;
        });

这主要取自alertify.js页面上的示例。但是，我想将取消按钮操作与onclose按钮分开进行自定义。但是，在设置单独的onclose函数后，用对话框的"x"按钮关闭会触发取消事件事件。

我建议使用对话框工厂来创建自定义对话框。

确认对话框定义设置为在关闭对话框。

然而，一个快速的解决方案是从现有的确认对话框继承并更新其setup以禁用invokeOnClose:

alertify.dialog('myCustomDialog', function() {
  return {
    setup: function() {
      return {
        buttons: [{
          text: 'Mode 1',
          key: 13 /*keys.ENTER*/ ,
          className: alertify.defaults.theme.ok,
        }, {
          text: 'Mode 2',
          key: 27 /*keys.ESC*/ ,
          invokeOnClose: false, // <== closing won't invoke this
          className: alertify.defaults.theme.cancel,
        }],
        focus: {
          element: 0,
          select: false
        },
        options: {
          title: '<em>Select Mode</em> ',
          maximizable: false,
          resizable: false
        },
      };
    }
  }
}, false, 'confirm');

然后使用局部变量来决定是否执行onclose回调内部的逻辑：

function demo() {
  var modeSelected = false;
  alertify.myCustomDialog("Which mode will it be?",
      function() {
        modeSelected = true;
        alertify.success('Mode 1');
      },
      function() {
        modeSelected = true;
        alertify.success('Mode 2');
      }
    )
    .set({
      onshow: null,
      onclose: function(arg) {
        if (!modeSelected) {
          alertify.message('confirm was closed.');
        }
        modeSelected = false;
      }
    });
}

请参阅实时演示

相关文章：