dialogalertifyjs

add custom buttons on alertify confirm dialog box


I am using Alertify js 1.6.1 to show dialog box when user leaves a page. Apart from Ok and Cancel, I need to add one extra button "continue" in alertify js confirm dialog box. Is there a way to add custom button functionality? Let me know if you have any ideas on it. Thanks


Solution

  • You can build your own or extend the existing confirm:

        alertify.dialog('myConfirm', function() {
          var settings;
          return {
            setup: function() {
              var settings = alertify.confirm().settings;
              for (var prop in settings)
                this.settings[prop] = settings[prop];
              var setup = alertify.confirm().setup();
              setup.buttons.push({ 
                text: '<u>C</u>ontinue',
                key: 67 /*c*/ ,
                scope: 'auxiliary',
              });
              return setup;
            },
            settings: {
              oncontinue: null
            },
            callback: function(closeEvent) {
              if (closeEvent.index == 2) {
                if (typeof this.get('oncontinue') === 'function') {
                  returnValue = this.get('oncontinue').call(this, closeEvent);
                  if (typeof returnValue !== 'undefined') {
                    closeEvent.cancel = !returnValue;
                  }
                }
              } else {
                alertify.confirm().callback.call(this, closeEvent);
              }
            }
          };
        }, false, 'confirm');
    

    see example