Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cannot Close Sweet Alert 2 Modal On Custom HTML Button Click

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);
        });
like image 474
Achilles Avatar asked Jan 23 '26 20:01

Achilles


2 Answers

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

Ref.: SweetAlter Methods

like image 172
pixellab Avatar answered Jan 26 '26 09:01

pixellab


onclick="swal.close(); return false;"
like image 38
user2511140 Avatar answered Jan 26 '26 10:01

user2511140



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!