是否可以将取消按钮调用的动作与alertify.js的onclose分开

时间:2016-05-03 04:21:12

标签: javascript alertifyjs

我目前有这个:

            $('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按钮分开。然而,用&#34; x&#34;关闭在设置单独的onclose函数后,该对话框的按钮将触发取消事件事件。

1 个答案:

答案 0 :(得分:1)

我建议使用Dialog Factory创建自定义对话框。

  

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

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

请参阅live demo