防止 SweetAlert 在点击弹出窗口外部时关闭

Question

我在电子商务应用程序的产品视图中使用Sweet Alert作为弹出窗口，其中包含两个按钮：一个用于进入购物车视图，另一个用于重新加载视图。

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

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

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

- Saqib A. Azhar

---

在“窗口关闭事件”中，您可以检查目标事件。 - manikant gautam

Answer 1

如果您正在使用 Sweet Alert 2，您可以使用此配置

allowOutsideClick: false

这应该可以工作。

- Halawa

---

@频道 如果您正在使用Sweet Alert 2，则此功能有效。 - Izzy

@Izzy 是的，但根据问题所述，他正在使用“Sweet Alert”，而不是“Sweet Alert 2”。 - Channel

检查 SweetAlert 版本。对于 SweetAlert 2，allowOutsideClick: false；对于版本 1，closeOnClickOutside: false。 - Gianluca Demarinis

谢谢，它已经很好地运作了，我已经添加到我的项目中。如果您正在使用Sweet Alert 2，则它将正常工作。 - Ajju Bhai

Answer 2

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

实际上，这里的所有答案都没有涉及到通过键盘来关闭弹窗的另一种方式。尤其是使用 ESC 键。为了防止这种情况发生，您需要添加两个选项而不是一个。

allowOutsideClick: false,
allowEscapeKey: false,

快速示例：

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

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

- Phoenix Himself

Answer 3

你要查找的属性是closeOnClickOutside：

closeOnClickOutside: false

- Channel

Answer 4

对于SweetAlert 2：

allowOutsideClick: false

版本3以及版本2以下的一些版本：

closeOnClickOutside: false

- SouravOrii

---

closeOnClickOutside: false 对于 Antério Vieira 的 Vue Sweet Alert 包装器（https://github.com/anteriovieira/vue-swal）非常有效。 - Akbar Noto

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

- gihandilanka

Answer 6

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

这将使点击外部区域时不会关闭。

- Gareth32

Answer 7

你可以设置这个属性：

allowOutsideClick: true

- Vinod Bhavnani

Answer 8

比如说，它的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
            }
);

- Qammar Feroz

---

这在新版本(2.0+)的sweetalert上不起作用。尽管@Channel给出的答案有效，但closeOnClickOutside:false仍然无法实现。 - Irfan Raza

@Irfan Raza 这种方法的不同之处在于，如果用户在对话框外单击，它将首先确认用户是否要关闭它。否则，swal中的选项allowOutsideClick: false就足够了。 - Qammar Feroz

Answer 9

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

- Vincent Lâm

Answer 10

我们正在使用高于2版本的Sweat alert，而在我们的情况下，我们需要它。

对于Chrome：

closeOnClickOutside: false

对于Firefox：

allowOutsideClick: false 

- Quacking Kahuna