Prevent SweetAlert to be closed on clicking outside the popup window

问题

I am using Sweet Alert for a popup on my product view in an E-commerce Application with two buttons: one for going on cart View and another for reloading the view.

But when a user clicks outside of the popup, the popup window closes automatically. I've tried following properties to stop it to be closed but nothing works :

hideOnOverlayClick: false,
hideOnContentClick: false,
closeClick: false,
helpers: {
    overlay: { closeClick: false } 
}

Any help/suggestion is highly appreciated.

Thanks.

回答1:

If you are using Sweet Alert 2, you can use this configuration

allowOutsideClick: false

This should work.

回答2:

The property you are looking for is closeOnClickOutside:

closeOnClickOutside: false

回答3:

For SweetAlert 2:

allowOutsideClick: false

and version 3 and some below version 2:

closeOnClickOutside: false

回答4:

Regarding Sweet Alert 2 (More effective solution)

Actually all answers here don't cover another way to dismiss the popup. And that's using keyboard. Especially the ESC key. In order to prevent that you would want to add two options instead of one.

allowOutsideClick: false,
allowEscapeKey: false,

Quick example:

Swal.fire({
  title: 'Do not dismiss!',
  icon: 'warning',
  showConfirmButton: false,
  allowOutsideClick: false,
  allowEscapeKey: false
})

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

回答5:

It is allowOutsideClick: false for example

swal({
  title: "View Cart",
  text: "Are you sure?",
  type: "warning",
  showCancelButton    : true,
  confirmButtonColor  : "#ff0000",
  confirmButtonText   : "Yes",
  allowOutsideClick: false,
  CancelButtonText    : "No"
            },
                function() //confirm
            {
                //if Yes do this
            }
);

回答6:

If the answers above do not work for you try:

closeOnClickOutside: false

回答7:

Use backdrop:true with the allowOutsideClick: false as following below. It worked for me.

swal({
    backdrop:true,
    allowOutsideClick: false,
    title:'Warning!',
    text:'Do you want to delete records?',
    type:'warning',
    showCancelButton: 0,
    confirmButtonText: 'OK',
}).then(function(e) {
    if (e.value) {
        //do what you want
    }
})

回答8:

We are using higher version than 2 for Sweat alert and in our case we needed.

for Chrome:

closeOnClickOutside: false

for Firefox:

allowOutsideClick: false 

回答9:

I had the same problem and here's how I solved it: setCanceledOnTouchOutside(false)

var dialog = SweetAlertDialog(context, SweetAlertDialog.ERROR_TYPE);
dialog.setTitleText(getString(R.string.session_expired));
dialog.setConfirmClickListener { sDialog ->
    sDialog.dismissWithAnimation()
    Utils.signOut(context!!)
    Handler().postDelayed({
    startActivity(getLoginIntent(context!!))
    AcTrans.Builder(context!!).performFade()
    }, 500)};
dialog.setCanceledOnTouchOutside(false);
dialog.show();

回答10:

For sweetalert version < 2

swal(
         "Records will be deleted permanently.",  //title
         "Do you want to delete records?",  //text
         "warning",  //icon
         {
              closeOnClickOutside: false, // prevent close on click anywhere/outside
              buttons: ["No", "Yes"], //with custom label
              dangerMode: true,
         }
    ).then(ok => {
         if (ok) {
              console.log("deleted")
         }
         else {
              console.log("not deleted")
         }
    })

回答11:

You can set this property:

allowOutsideClick: true

回答12:

If you wan't want to close dialog on esc or outside click below is working for me.!

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this details!",
  icon: "warning",
  closeOnClickOutside: false,
  closeOnEsc: false,
  allowOutsideClick: false,
  buttons: [
    'No, cancel it!',
    'Yes, I am sure!'
  ],
  dangerMode: true,
})

回答13:

For latest version it is

allowOutsideClick: false

来源：https://stackoverflow.com/questions/47749095/prevent-sweetalert-to-be-closed-on-clicking-outside-the-popup-window