Search code examples
javascriptsweetalertsweetalert2

SweetAlert2 disallow outside click after confirm


I want to create an alert similar to the ajax-example, but allowing outside click dismiss before confirming. After the user clicks confirm I would like to disallow outside click until the operation is finished.

Setting the config variable allowOutsideClick to false like in the example will never allow outside click and I don't see a valid method in the docs to achieve this behavior programatically.


Solution

  • It's possible to pass the function to the allowOutsideClick parameter:

    allowOutsideClick: () => { 
      // add your logic here and return boolean 
    }
    

    Your case:

    Swal.fire({
      title: 'Submit email to run ajax request',
      input: 'email',
      showLoaderOnConfirm: true,
      preConfirm: (email) => {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve()
          }, 3000)
        })
      },
      allowOutsideClick: () => !swal.isLoading()
    })
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>