无法在自定义 HTML 按钮单击时关闭 Sweet Alert 2 模式

Question

I am having a very hard time for debugging this. I am using custom HTML parameter from SweetAlert2 . What I want to achieve is that whenever I click "Back" Button, I want to close the modal. I did read the documentation. we can usee swal.close() or swal.closeModal(). But when I doing it, I can't close the modal upon a back button. Below are the codes.

//declare custom html
        const cancelBtn      = `<button class="cancelSwalBtn" id="standardCancelBtn" >Back</button>`;
        const removeAddOnBtn = `<button class="removeAddonSwalBtn" id="standardRemoveAddonBtn">Remove Add-ons</button>`;
        const proceed        = `<button type="button" role="button" tabindex="0" class="proceedSwalBtn" id="standardProceedBtn">Proceed</button>`;
        const html           = `<p>Your voucher does not cover the cost additional of addons. </p><div class="btn-holder">${cancelBtn}${removeAddOnBtn}${proceed}</div>`;

        //custom swal
        swal({
            type: 'info',
            title: 'Info',
            html: `${html}`,
            width :700,
            showCancelButton: false,
            showConfirmButton:false,
            onOpen: (swal) => {
                //close btn
               $(swal).find('#standardCancelBtn').click(function (e) {
                   console.log('in');
                   swal.close();
                   //swal.closeModal();
               })
            }

        }).then((result) =>{
            console.log(result);
        });

Answer 1

swal.close() or swal.closeModal() should work.

Ref.: SweetAlter Methods

Answer 2

Simply add: onclick="swal.closeModal(); return false;" inside your html button like this:

const cancelBtn = `<button class="cancelSwalBtn" id="standardCancelBtn" onclick="swal.closeModal(); return false;">Back</button>`;

Answer 3

onclick="swal.close(); return false;"