web-dev-qa-db-ja.com

sweetalert 2の2つ以上のボタン

2つのボタンがあるスイートアラートがありますが、もう1つボタンが必要です。たとえば、今のところ、「はい」と「いいえ」があり、後でボタンをもう1つ追加します。助けてください

$("#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' ?>"
        });
    });

前もって感謝します：）

javascriptjquerysweetalertsweetalert2
12
Sukhwinder Sodhi

JQueryイベントバインディングでカスタム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>
18
Konstantin Azizov

上記の答えは私にはうまくいきませんでしたので、私は次のことをしました：

    $(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>
9
Ricardo Melo

リチャード・クックは、元の回答（コンスタンチン・アジゾフによって提供された）はSweetAlert2のバージョン4.2.6での動作を停止したと上で述べました。彼は、これがノードがhtmlに追加されるときにクローン化されることに関係していると示唆しました。彼が正しかったかどうかを言うほど、SweetAlert2をよく知りません。ただし、ボタンが追加されたが、onclickコールバック関数が呼び出されることはなかったことがわかりました。

少しの努力で、これをSweetAlert2の現在のリリースで動作させることができました。動作させるには、後でonclickイベントをボタンに割り当てる必要がありました。最終的にボタンにIDを追加して、jQueryから簡単に選択できるようにしました。次に、swanオブジェクトにonOpen関数を追加し、そこにロジックを接続してコールバック関数を関連付けました。以下は私のために働くコードのスニペットです。

また、メッセージとボタンは既存の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();
                });
            }
        });

    };
1
KW402