Search code examples
javascriptsweetalertsweetalert2

Sweetalert2 allowOutsideClick not working on toast mode and close button not appearing on right side

I'm using Sweetalert2 from https://sweetalert2.github.io/, this is my configuration

  swal({
      title: 'Success!',
      type: 'success',
      toast: true,
      html: response.message,
      showCloseButton: true,
      showCancelButton: true,
      allowEscapeKey: true,
      allowOutsideClick: true,
      //focusConfirm: false,
      confirmButtonText: 'Continue Shopping',
      confirmButtonAriaLabel: 'Continue Shopping',
      cancelButtonText: '<a href="' + cartLink + '" style="color:white;">View Cart and Checkout</a>',
      cancelButtonColor: '#ff6d02',
      cancelButtonAriaLabel: 'Cart',
  });

This is the result

swal

So, the problem is that the outsideclick true config doesn't work and the close button is not on the right. How can I fix this please?

Solution

  • I'm the author of SweetAlert2, thanks for posting this question.

    1. Close button

    close button is not on the right

    This is fixed in the latest release (v7.26.4), please update your dependency.

    2. allowOutsideClick parameter

    The allowOutsideClick parameter isn't compatible with toasts, since toasts are modeless and don't have a backdrop. In the latest version you will get the console warning about incompatible with toasts parameters:

    image