【问题标题】：Prevent SweetAlert to be closed on clicking outside the popup window防止在弹出窗口外单击时关闭 SweetAlert
【发布时间】：2018-05-24 17:59:52
【问题描述】：

我正在使用 Sweet Alert 在电子商务应用程序中的产品视图上弹出一个带有两个按钮的按钮：一个用于进入购物车视图，另一个用于重新加载视图。

但是当用户在弹出窗口之外点击时，弹出窗口会自动关闭。我尝试了以下属性来阻止它关闭但没有任何效果：

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

非常感谢任何帮助/建议。

谢谢。

【问题讨论】：

在window close events你可以检查目标事件。

标签： javascript sweetalert

【解决方案1】：

我遇到了同样的问题，我是这样解决的：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();

【讨论】：

【解决方案2】：

关于 Sweet Alert 2（更有效的解决方案）

实际上这里的所有答案都没有涵盖另一种关闭弹出窗口的方法。那就是使用键盘。特别是 ESC 键。为了防止您想要添加两个选项而不是一个。

allowOutsideClick: false,
allowEscapeKey: false,

简单示例：

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

&lt;script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"&gt;&lt;/script&gt;

【讨论】：

【解决方案3】：

我们正在使用高于 2 的版本来发出汗水警报，在我们的例子中我们需要。

对于 Chrome：

closeOnClickOutside: false

对于火狐：

allowOutsideClick: false

【讨论】：

【解决方案4】：

最新版本是

allowOutsideClick: false

【讨论】：

【解决方案5】：

使用backdrop:true 和allowOutsideClick: false，如下所示。它对我有用。

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

【讨论】：

【解决方案6】：

对于 SweetAlert 2：

allowOutsideClick: false

和第 3 版和低于第 2 版的部分：

closeOnClickOutside: false

【讨论】：

closeOnClickOutside: false 就像 Antério Vieira (github.com/anteriovieira/vue-swal) 的 Sweet Alert 的 Vue 包装器的魅力一样

【解决方案7】：

对于sweetalert版本

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

【讨论】：

【解决方案8】：

如果上面的答案对您不起作用，请尝试：

closeOnClickOutside: false

【讨论】：

【解决方案9】：

如果你使用的是 Sweet Alert 2，你可以使用这个配置

allowOutsideClick: false

这应该可行。

【讨论】：

@Channel 如果您使用的是甜蜜警报 2，这确实有效
@Izzy 是的，但正如问题中所述，他使用“甜蜜警报”而不是“甜蜜警报 2”
检查 Swal 版本。 allowOutsideClick: false 对于 SweetAlert 2，closeOnClickOutside: false 对于版本 1

【解决方案10】：

如果您不想在 esc 或外部关闭对话框，请单击下面的内容对我有用。！

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

【讨论】：

【解决方案11】：

例如是allowOutsideClick: false

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

【讨论】：

这不适用于 sweetalert 的新版本（2.0+）。尽管@Channel 给出的答案有效 closeOnClickOutside: false
@Irfan Raza 这种方法的不同之处在于，如果用户在对话框外点击，它会先确认用户是否要关闭它。否则 swal allowOutsideClick 中的选项：false，就足够了。

【解决方案12】：

您要查找的属性是 closeOnClickOutside:

closeOnClickOutside: false

【讨论】：

像魅力一样工作！谢谢。
效果很好！！谢谢
在 SweetAlert 2.0 版本中工作。
谢谢，太棒了！完美运行！

【解决方案13】：

你可以设置这个属性：

allowOutsideClick: true

【讨论】：