【问题标题】:add custom buttons on alertify confirm dialog box在 alertify 确认对话框上添加自定义按钮
【发布时间】:2016-03-15 08:44:12
【问题描述】:

我正在使用 Alertify js 1.6.1 在用户离开页面时显示对话框。除了确定和取消之外,我还需要在 alertify js 确认对话框中添加一个额外的按钮“继续”。有没有办法添加自定义按钮功能?如果您对此有任何想法,请告诉我。谢谢

【问题讨论】:

    标签: dialog alertifyjs


    【解决方案1】:

    您可以构建自己的或扩展现有的确认:

        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');
    

    example

    【讨论】:

    • 非常感谢您的回复,实际上我之前曾尝试在 alertify js 本身中扩展确认对话框,并且自定义按钮显示正确。然而我发现的一个问题是:当我点击继续时,对话框没有关闭,如果我第二次点击继续,那么只有框被关闭。我在 continue 函数的 cal 背面尝试了 alertify.closeall()、alertify.confirm.close () 但没有奏效。
    • 我提供的例子中没有看到这样的问题!
    • 是的,这有点奇怪,我用你的例子试过了,效果很好。但是,我必须在 oncontinue 函数的回调内部进行一些处理,而不是警告。然后盒子不关闭。 'oncontinue': function() { // alertify.warning('continue'); location.hash = '#' + 'id:'+someResourceId; // 有效,但对话框没有关闭 },
    • 可能是别的东西!你能提供一个在线例子吗?
    • 是的,我也认为这可能与我在继续功能上的处理代码有关。我现在找到了解决方法。无论如何感谢您的反馈:)
    猜你喜欢
    • 2015-08-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-09-22
    相关资源
    最近更新 更多