【问题标题】:More than 2 buttons on sweetalert 2sweetalert 2 上有超过 2 个按钮
【发布时间】:2016-09-01 09:54:02
【问题描述】:

我有一个有 2 个按钮的甜食,但我想在里面再多一个按钮。 例如,到目前为止,我有“是”和“否”,我想稍后再添加一个按钮。请帮忙。

$("#close_account").on("click", function(e) {
    e.preventDefault();
    swal({
        title: "Are you sure?",
        text: "You will not be able to open  your account!",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        confirmButtonText: "Yes, close my account!",
        closeOnConfirm: false
    },
    function() {
        window.location.href="<?php echo base_url().'users/close_account' ?>"
    });
});

提前致谢。

【问题讨论】:

    标签: javascript jquery sweetalert sweetalert2


    【解决方案1】:

    您应该使用带有 jQ​​uery 事件绑定的自定义 HTML,它的工作原理几乎相同,唯一的问题是您需要自己为按钮添加样式,因为 SweetAlert 类不适合我。

    $(document).ready(function() {
      $("#close_account").on("click", function(e) {
        var buttons = $('<div>')
        .append(createButton('Ok', function() {
           swal.close();
           console.log('ok'); 
        })).append(createButton('Later', function() {
           swal.close();
           console.log('Later'); 
        })).append(createButton('Cancel', function() {
           swal.close();
           console.log('Cancel');
        }));
        
        e.preventDefault();
        swal({
          title: "Are you sure?",
          html: buttons,
          type: "warning",
          showConfirmButton: false,
          showCancelButton: false
        });
      });
    });
    
    function createButton(text, cb) {
      return $('<button>' + text + '</button>').on('click', cb);
    }
    <link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <button id="close_account">Show</button>

    【讨论】:

    • 知道如何在按钮之间添加空格
    • @baktetemiloud,您可以为按钮添加类并使用 CSS 设置您想要的样式。
    • @KonstantinAzizov 我使用的是旧版本的 sweetalert,如何在其中添加自定义按钮!?
    • @bharatparmar,实际上html 应该在sweetalert 的旧版本中可用,您当前的实现遇到什么问题?
    • 特别是此更改:github.com/sweetalert2/sweetalert2/compare/…。现在节点在添加到内部 HTML 时被克隆(这可能会剥离事件处理程序)。
    【解决方案2】:

    上面的答案对我不起作用,所以我做了以下事情:

        $(document).on('click', '.SwalBtn1', function() {
            //Some code 1
            console.log('Button 1');
            swal.clickConfirm();
        });
        $(document).on('click', '.SwalBtn2', function() {
            //Some code 2 
            console.log('Button 2');
            swal.clickConfirm();
        });
    
    $('#ShowBtn').click(function(){
        swal({
            title: 'Title',
            html: "Some Text" +
                "<br>" +
                '<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtn">' + 'Button1' + '</button>' +
                '<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtn">' + 'Button2' + '</button>',
            showCancelButton: false,
            showConfirmButton: false
        });
     });
    .customSwalBtn{
    		background-color: rgba(214,130,47,1.00);
        border-left-color: rgba(214,130,47,1.00);
        border-right-color: rgba(214,130,47,1.00);
        border: 0;
        border-radius: 3px;
        box-shadow: none;
        color: #fff;
        cursor: pointer;
        font-size: 17px;
        font-weight: 500;
        margin: 30px 5px 0px 5px;
        padding: 10px 32px;
    	}
    <link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <button id="ShowBtn" class="customSwalBtn">Alert</button>

    【讨论】:

      【解决方案3】:

      ??? 我们最近发布了SweetAlert2 v10,支持第三个“拒绝”按钮:

      Swal.fire({
        title: 'Do you want to save the changes?',
        showDenyButton: true,
        showCancelButton: true,
        confirmButtonText: `Save`,
        denyButtonText: `Don't save`,
      }).then((result) => {
        if (result.isConfirmed) {
          Swal.fire('Saved!', '', 'success')
        } else if (result.isDenied) {
          Swal.fire('Changes are not saved', '', 'info')
        }
      })
      &lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"&gt;&lt;/script&gt; 

      【讨论】:

      • 您好,我已经尝试过了,但我使用的是 SweetAlert 版本,该对话框仅使用 swal 启动,而不是 swal.fire。我更新了 JS 和 CSS 文件,然后将所有出现的 swal( 替换为 swal.fire( 并显示对话框,但非常难看。例如,文本以不同的方式对齐并且未显示图标。所以我意识到这个版本不向后兼容。拥有更多按钮的唯一解决方案是使用自定义 HTML?
      【解决方案4】:

      Richard Cook 在上面提到原始答案(由 Konstantin Azizov 提供)停止使用 SweetAlert2 的 4.2.6 版。他建议这与将节点添加到 html 时被克隆有关。我对 SweetAlert2 的了解还不够,无法判断他是否正确。不过,我可以看到,我的按钮已添加,但 onclick 回调函数从未被调用。

      稍加努力,我就能让它与当前版本的 SweetAlert2 一起工作。为了使它工作,我必须稍后将 onclick 事件分配给按钮。我最终为按钮添加了 id,使它们易于从 jQuery 中选择。然后我将 onOpen 函数添加到我的 swal 对象中,并在其中连接逻辑以关联回调函数。下面是适用于我的代码的 sn-p。

      另外请注意,消息和按钮使用一些现有的 SweetAlert2 类,因此它们的外观与现有的 UI 元素相同。提醒一句,我确实尝试过使用 swal2-confirm 和 swal2-cancel 类。当我这样做时,我遇到了一些问题。 SweetAlert2 代码可能仅依赖于使用该类的单个元素。我没有时间追究它,所以我只是停止使用这些课程。

      function createButton(text, id) {
              return $('<button class="swal2-input swal2-styled" id="'+id+'">'+text+'</button>');
          }
      
          function createMessage(text) {
              return $('<div class="swal2-content" style="display: block;">'+text+'</div>');
          }
      
      function swThreeButton(msg, textOne, textTwo, textThree, callbackOne, callbackTwo, callbackThree) {
      
              var buttonsPlus = $('<div>')
                      .append(createMessage(msg))
                      .append(createButton(textOne,'sw_butt1'))
                      .append(createButton(textTwo,'sw_butt2'))
                      .append(createButton(textThree,'sw_butt3'));
      
              swal({
                  title: 'Select Option',
                  html: buttonsPlus,
                  type: 'question',
      
                  showCancelButton: false,
                  showConfirmButton: false,
                  animation: false,
                  customClass: "animated zoomIn",
                  onOpen: function (dObj) {
                      $('#sw_butt1').on('click',function () {
                         swal.close();
                         callbackOne();
                      });
                      $('#sw_butt2').on('click',function () {
                          swal.close();
                          callbackTwo();
                      });
                      $('#sw_butt3').on('click',function () {
                          swal.close();
                          callbackThree();
                      });
                  }
              });
      
          };
      
      
      

      【讨论】:

        【解决方案5】:

        我曾经需要将第三个按钮添加到SweetAlert2 弹出窗口。就我而言,最简单的方法是使用footer,它可以是纯文本或 HTML:

        $(function() {
            $('.btn').click(function(e) {
                e.preventDefault();
                
                Swal.fire({
                    icon: 'warning',
                    title: 'Are you sure?',
                    text: 'You won\'t be able to revert this!',
                    showCloseButton: true,
                    showCancelButton: true,
                    footer: '<a href="#!" id="some-action">Some action</a>'
                }).then((result) => {
                    console.log(result);
                });
            });
            
            $(document).on('click', '#some-action', function(e) {
                e.preventDefault();
                console.log('Some action triggered.');
            });
        });
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
        
        <div class="text-center">
            <button type="button" class="btn btn-primary my-3">Click me</button>
        </div>

        【讨论】:

          【解决方案6】:

          对于sweetalert2,这对我有用:(Run it live)

          var onBtnClicked = (btnId) => {
            Swal.close();
            if (btnId != "cancel") Swal.fire("you choosed: " + btnId);
          };
          Swal.fire({
            title: "What you want to do?",
            icon: "warning",
            showConfirmButton: false,
            showCloseButton: true,
            html: `
              <p>select an action</p>
              <div>
                <button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
                <button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
                <button class="btn btn-secondary" onclick="onBtnClicked('cancel')">Cancel</button>
              </div>`
          });
          

          【讨论】:

            【解决方案7】:

            现在使用 ES6 很容易。

            请看这里:如何添加无限按钮

              createSwalButton = async () => {
            
                let swalButton = await swal({
                  title: "Add Buttons?",
                  text: "This will create a new button.",
                  icon: "info",
                  buttons: {
                    buttonOne: {
                      text: "First",
                      value: "firstVal",
                      visible: true,
                      className: "swal-btn-cancel",
                      closeModal: true,
                    },
                    buttonTwo: {
                      text: "Second",
                      value: "secondVal",
                      visible: true,
                      className: "swal-btn-confirm",
                      closeModal: true
                    },
                    buttonThree: {
                      text: "Third",
                      value: "thirdVal",
                      visible: true,
                      className: "swal-btn-confirm",
                      closeModal: true
                    },
                    buttonFour: {
                      text: "Fourth",
                      value: "fourthVal",
                      visible: true,
                      className: "swal-btn-confirm",
                      closeModal: true
                    },
                    buttonFive: {
                      text: "Fifth",
                      value: "fifthVal",
                      visible: true,
                      className: "swal-btn-confirm",
                      closeModal: true
                    }
                  },
                })
            
                if (swalButton === "firstVal") {    
                  //do stuff
                }
              }
            

            好吧,我可能有点过火了,但你知道它是如何工作的。

            向 SWAL 团队致敬!这是一款非常棒的产品。

            【讨论】:

            • 在甜蜜警报 2 中不起作用“按钮”道具被忽略
            【解决方案8】:

            对于 sweetalert2 这对我有用

            $(document).ready(function() {
              $("#close_account").on("click", function(e) {
                var buttons = $('<div>')
                .append(createButton('Ok', function() {
                   swal.close();
                   console.log('ok'); 
                })).append(createButton('Later', function() {
                   swal.close();
                   console.log('Later'); 
                })).append(createButton('Cancel', function() {
                   swal.close();
                   console.log('Cancel');
                }));
                
                e.preventDefault();
                swal({
                  title: "Are you sure?",
                  html: buttons,
                  type: "warning",
                  showConfirmButton: false,
                  showCancelButton: false
                });
              });
            });
            
            function createButton(text, cb) {
              return $('<button>' + text + '</button>').on('click', cb);
            }
            <link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
            <script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
            
            <button id="close_account">Show</button>

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2011-06-28
              • 2021-02-28
              • 2012-09-22
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多