function show_alert(args) {
    Swal.fire({
        icon: args.icon,
        title: args.title,
        text: args.message,
        html: args.html,
        allowEscapeKey: args.allowEscapeKey ? args.allowEscapeKey : true,
        allowOutsideClick: args.allowOutsideClick ? args.allowOutsideClick : true,
        confirmButtonText: args.confirmButtonText ? args.confirmButtonText : 'Tamam',
        confirmButtonColor: args.confirmButtonColor ? args.confirmButtonColor : '#3085d6',
        cancelButtonText: args.cancelButtonText ? args.cancelButtonText : 'İptal',
        cancelButtonColor: args.cancelButtonColor ? args.cancelButtonColor : '#d33',
        showCancelButton: args.showCancelButton === undefined ? false : args.showCancelButton,
        showCloseButton: args.showCloseButton === undefined ? false : args.showCloseButton,
        showConfirmButton: args.showConfirmButton === undefined ? true : args.showConfirmButton,
        didOpen: args.didOpen ? args.didOpen : null,
        reverseButtons: true,
    }).then((result) => {
        if (result['isConfirmed']) {
            args.callback ? args.callback_args ? args.callback(args.callback_args) : args.callback() : null;
        } else if (result['isDismissed'] && args['isDismissed']) {
            event.preventDefault();
            args.isDismissed ? args.isDismissed() : null;
        }
    });
}

The above code block is a general alert display function. I can display alerts based on the parameters I give in "args".

I wrote the following code blocks to show a loading alert when the user clicks a button:

show_alert({
    'title': 'Please wait',
    'html': 'Loading audio file ...',
    'allowEscapeKey': false,
    'allowOutsideClick': false,
    'showConfirmButton': false,
    'showCancelButton': false,
    'showCloseButton': false,
    'didOpen': () => {Swal.showLoading();},
    'isDismissed': () => {console.log('dismissed');}
});

However, when the user clicks anywhere on the page outside of the alert, the alert closes.

Is it possible to stop this by using a function like event.preventDefault()? If you can help, I would appreciate it.

In the "else if" block, I tried to catch the event and prevent the click event, like the "allowOutsideClick" property, but I couldn't.

CodePudding user response：

You ternary always sets allowOutsideClick to a truthy value:

allowOutsideClick: args.allowOutsideClick ? args.allowOutsideClick : true

This needs to be changed to false if allowOutsideClick is falsy:

allowOutsideClick: args.allowOutsideClick ? args.allowOutsideClick : false

As SweetAlert accepts truthy/falsy values for its options, this can be simplified to just:

allowOutsideClick: args.allowOutsideClick

I would recommend looking at your other options and providing similar optimisations. Such as with the allowEscapeKey option (which seems to have a similar issue).

Also, anywhere that you have the pattern of:

a ? a : b

can be simplified to just

a || b

As these mean the same thing.

function show_alert(args) {
  Swal.fire({
    icon: args.icon,
    title: args.title,
    text: args.message,
    html: args.html,
    allowEscapeKey: args.allowEscapeKey,
    allowOutsideClick: args.allowOutsideClick,
    confirmButtonText: args.confirmButtonText || 'Tamam',
    confirmButtonColor: args.confirmButtonColor || '#3085d6',
    cancelButtonText: args.cancelButtonText || 'İptal',
    cancelButtonColor: args.cancelButtonColor || '#d33',
    showCancelButton: args.showCancelButton,
    showCloseButton: args.showCloseButton,
    showConfirmButton: args.showConfirmButton === undefined ? true : args.showConfirmButton,
    didOpen: args.didOpen,
    reverseButtons: true,
  }).then((result) => {
    if (result['isConfirmed']) {
      args.callback ? args.callback_args ? args.callback(args.callback_args) : args.callback() : null;
    } else if (result['isDismissed'] && args['isDismissed']) {
      event.preventDefault();
      args.isDismissed ? args.isDismissed() : null;
    }
  });
}

show_alert({
  'title': 'Please wait',
  'html': 'Loading audio file ...',
  'allowEscapeKey': false,
  'allowOutsideClick': false,
  'showConfirmButton': false,
  'showCancelButton': false,
  'showCloseButton': false,
  'didOpen': () => {
    Swal.showLoading();
  },
  'isDismissed': () => {
    console.log('dismissed');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.6.16/sweetalert2.min.js" integrity="sha512-4aFcnPgoxsyUPgn8gNinplVIEoeBizjYPTpmOaUbC3VZQCsRnduAOch9v0Pn30yTeoWq1rIZByAE4/Gg79VPEA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/11.6.16/sweetalert2.css" integrity="sha512-JzSVRb7c802/njMbV97pjo1wuJAE/6v9CvthGTDxiaZij/TFpPQmQPTcdXyUVucsvLtJBT6YwRb5LhVxX3pQHQ==" crossorigin="anonymous" referrerpolicy="no-referrer"/>

As a side note, you're misusing the conditional operator ? : within your .then(). You should use these when you need to use the return value that the expression evaluates to. When you don't use the evaluated value, and instead just perform side-effects, such as calling a function, then you're better off using an if-statement.

I'd also argue that only calling args.callback(args.callback_args) only when args.callback_args is truthy probably isn't what youu want to do, as this prevents you from being able to specify callback_args as falsy values such as false, 0, "", etc. You're better of always calling args.callback(args.callback_args)