1

我目前有这个：

            $('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”按钮关闭对话框会触发取消事件事件。

4

1 回答 1

1

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

确认对话框定义设置为在关闭对话框时调用取消操作。

但是，一个快速的解决方案是继承现有的确认对话框并将其更新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;
      }
    });
}

看现场演示

于 2016-05-03T14:46:53.523 回答