javascript sweetalert 2上的按钮超过2个

5ktev3wc 于 2023-05-05 发布在 Java

关注(0)|答案(9)|浏览(241)

我有一个sweetalert与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

来源：https://stackoverflow.com/questions/39268318/more-than-2-buttons-on-sweetalert-2

9条答案

按热度按时间

b4qexyjb1#

你应该使用定制的HTML与jQuery事件绑定，它的工作原理几乎相同，唯一的问题是，你需要添加自己的按钮样式，因为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>

赞(0）回复(0）举报 2023-05-05

nuypyhwy2#

上面的答案对我不起作用，所以我做了以下几点：

$(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>

赞(0）回复(0）举报 2023-05-05

4xrmg8kj3#

🎉🎉🎉 我们最近发布的SweetAlert2 v10支持第三个“deny”按钮：

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

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

赞(0）回复(0）举报 2023-05-05

nbysray54#

Richard Cook在上面评论说，最初的答案（由Konstantin Azizov提供）在SweetAlert 2的4.2.6版本中停止工作。他认为这与添加到html中的节点被克隆有关。我不太了解SweetAlert 2，不知道他是否正确。不过，我可以看到，我的按钮被添加了，但onclick回调函数从未被调用。
通过一点努力，我能够让这个与当前版本的SweetAlert 2一起工作。为了让它工作，我必须在稍后的时间将onclick事件分配给按钮。最后，我给按钮添加了id，使它们更容易从jQuery中选择。然后我将onOpen函数添加到我的swal对象中，并在那里连接逻辑以关联回调函数。下面是一段对我有用的代码。
还要注意，消息和按钮使用了一些现有的SweetAlert 2类，因此它们与现有的UI元素具有相同的外观。提醒一下，我确实尝试过使用swal 2-confirm和swal 2-cancel类。当我这样做的时候，我遇到了一些问题。SweetAlert 2代码可能依赖于仅存在使用该类的单个元素。我没有时间去追踪它，所以我只是停止使用这些类。

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();
                });
            }
        });

    };

赞(0）回复(0）举报 2023-05-05

t0ybt7op5#

我曾经需要添加第三个按钮到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>

赞(0）回复(0）举报 2023-05-05

cig3rfwq6#

对于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>`
});

赞(0）回复(0）举报 2023-05-05

8fq7wneg7#

Sweet Alert在他们的指南页面上有解决方案：https://sweetalert.js.org/guides/#customizing-buttons
在尝试了上述所有解决方案（没有一个成功）后，这个工作得非常好：-）

赞(0）回复(0）举报 2023-05-05

9njqaruj8#

对于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>

赞(0）回复(0）举报 2023-05-05

kq0g1dla9#

这在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队加油！这是一个伟大的伟大的产品。

赞(0）回复(0）举报 2023-05-05

我来回答

javascript sweetalert 2上的按钮超过2个

9条答案

相关问题

热门标签

最新问答