Prevent SweetAlert to be closed on clicking outside the popup window

Question

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.

in `window close events` you can check for target event. – manikant gautam Dec 11 '17 at 08:46 — manikant gautam, Dec 11 '17 at 08:46

score 58 · Answer 1 · edited Mar 25 '19 at 18:45

58

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

allowOutsideClick: false

This should work.

edited Mar 25 '19 at 18:45

SimonHawesome

1,223
2
13
18

answered Dec 20 '17 at 11:51

Halawa

789
1
7
18

2

@Channel This does work if you're using sweet alert 2 – Izzy Aug 09 '18 at 07:11
1

@Izzy yes but as specified in the question, he using "Sweet Alert" and not "Sweet Alert 2" – Channel Dec 17 '18 at 11:05
1

check Swal version. allowOutsideClick: false For SweetAlert 2, closeOnClickOutside: false for version 1 – Gianluca Demarinis Mar 18 '19 at 16:00

score 27 · Answer 2 · answered May 04 '18 at 15:27

27

The property you are looking for is closeOnClickOutside:

closeOnClickOutside: false

answered May 04 '18 at 15:27

Channel

1,915
18
16

Works like a charm! Thanks. – Ninja Boy Dec 15 '18 at 15:33
Works great!!Thank you – Sotiris Zegiannis Jan 20 '19 at 11:05
Works in the SweetAlert 2.0 version. – krescruz Feb 09 '20 at 10:16
Thanks, that was awsome! Works perfectly! – Tiago Rangel de Sousa Mar 09 '21 at 08:46

score 17 · Answer 3 · edited Jul 02 '19 at 20:17

17

For SweetAlert 2:

allowOutsideClick: false

and version 3 and some below version 2:

closeOnClickOutside: false

edited Jul 02 '19 at 20:17

Jack

3,392
7
36
61

answered Aug 28 '18 at 07:23

SouravOrii

505
7
13

1

the `closeOnClickOutside: false` works like charm for Vue wrapper for Sweet Alert by Antério Vieira (https://github.com/anteriovieira/vue-swal) – Akbar Noto Mar 05 '20 at 17:17

score 14 · Answer 4 · answered May 11 '20 at 08:55

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>

score 3 · Answer 5 · answered May 15 '18 at 09:37

3

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
            }
);

answered May 15 '18 at 09:37

Qammar Feroz

677
8
19

this didn't work on new version (2.0+) of sweetalert . Although answer given by @Channel worked closeOnClickOutside: false – Irfan Raza Jun 22 '18 at 12:54
@Irfan Raza The difference in this approach is, if user click outside the dialog, it will confirm the user first, if he/she want to close it or not. Otherwise option in swal allowOutsideClick : false, is enough. – Qammar Feroz Jun 28 '18 at 08:57

score 3 · Answer 6 · answered Nov 28 '19 at 14:11

3

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

for Chrome:

closeOnClickOutside: false

for Firefox:

allowOutsideClick: false

answered Nov 28 '19 at 14:11

Quacking Kahuna

53
5

score 3 · Answer 7 · edited Nov 06 '20 at 11:45

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();

score 2 · Answer 8 · answered Jun 12 '19 at 12:17

2

If the answers above do not work for you try:

closeOnClickOutside: false

answered Jun 12 '19 at 12:17

Gareth32

21
6

score 2 · Answer 9 · answered Sep 11 '19 at 15:48

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
    }
})

score 1 · Answer 10 · answered Jun 20 '19 at 05:18

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")
         }
    })

score 1 · Answer 11 · answered Sep 24 '19 at 14:37

1

For latest version it is

allowOutsideClick: false

answered Sep 24 '19 at 14:37

Swapnil Ghone

571
6
14

score 0 · Answer 12 · answered Dec 11 '17 at 08:46

0

You can set this property:

allowOutsideClick: true

answered Dec 11 '17 at 08:46

Vinod Bhavnani

1,829
1
13
17

score 0 · Answer 13 · edited Oct 07 '18 at 18:48

0

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,
})

edited Oct 07 '18 at 18:48

M.A.K. Ripon

1,561
3
24
42

answered Oct 07 '18 at 16:12

Jitendra

1
2

Prevent SweetAlert to be closed on clicking outside the popup window

13 Answers13

Regarding Sweet Alert 2 (More effective solution)

Quick example:

For sweetalert version < 2

Linked