Sweetalert像正常提示一样阻止 [英] sweetalert blocking like normal prompt

问题描述

我正在使用swal( http://t4t5.github.io/sweetalert )来获取一些信息用户点击某些内容时获得的数据.然后，我想从调用swal的函数中返回该值.换句话说，对于下面的示例，我想将labels中的项目文本设置为输入值.问题是它似乎在关闭swal/输入数据之前就返回了:

I am using swal (http://t4t5.github.io/sweetalert) to get some data from the user when they click on something. I want to then return that from the function I am calling swal in. In other words, for the example below, I want to set the text of the items in labels to the input value. The problem is it seems to return before swal has been closed/data has been entered:

.on('dblclick', function(l) {
  labels.text(function (e) {  
     return swal({   
      title: "Edit label"
    },
      function(inputValue){  
      if(inputValue) {
        return inputValue
      }
    });
   })
});

正常的prompt alert处于阻止状态，因此可以执行此操作，swal可以执行此操作吗?

A normal prompt alert is blocking so this can be done, can swal do this?

谢谢

推荐答案

虽然您无法获得Sweet Alerts块，但是您可以使用其回调功能来触发任何需要先解除警报的代码.例子中有一些例子.例如，假设您有一个是/否样式警报，则有一个文件删除示例.

While you can't have Sweet Alerts block, what you can do is use its callback functionality to fire any code that needs the alert to be dismissed first. The examples have a few instances of this. For example, assuming you have a yes/no style alert, there's the file deletion example.

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  //The callback will only fire on cancel if the callback function accepts an
  //argument. So, if the first line were 'function () {' with no argument, clicking
  //cancel would not fire the callback.
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

或AJAX示例:

swal({
  title: "Ajax request example",
  text: "Submit to run ajax request",
  type: "info",
  showCancelButton: true,
  closeOnConfirm: false,
  showLoaderOnConfirm: true,
},
function(){
  setTimeout(function(){
    swal("Ajax request finished!");
  }, 2000);
});

在这两种方法中，直到警报与之交互，才会触发回调，并且将调用的结果作为参数传递给回调.

In both of these, the callback isn't fired until the alert is interacted with, and the result of the call is passed in as an argument to the callback.

所以说您需要等到有人单击确定".

So say you need to wait until someone clicks okay.

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue",
  closeOnConfirm: false
}, function () {
  swal("Deleted account", "We'll miss you!", "success");
});

注意:仅当您在回调中显示后续警报时，closeOnConfirm/closeOnCancel才需要为false.如果将其设置为true，它将在显示给用户之前关闭第二个警报.但是，如果您执行的是与swal不相关的操作，并且您没有关闭它，则它将无限期保持打开状态.

Note: The closeOnConfirm/closeOnCancel only needs to be false if you're displaying a subsequent alert in the callback. If it's set to true, it will close the second alert before it's displayed to the user. However, if you're doing something non-swal related, and you don't have it close, it will remain open indefinitely.

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue"
}, function () {
  console.log("This still shows!")
});

如果您想在执行与swal不相关的操作时使警报保持打开状态，则应在代码末尾调用swal.close().

If you want the alert to stay open while you're doing something non-swal related, you should call swal.close() at the end of your code.

swal({
  title: "Delete your account?",
  text: "Clicking on continue will permanently delete your account.",
  type: "warning",
  confirmButtonText: "Continue",
  closeOnConfirm: false
}, function () {
  console.log("This still shows!");
  setTimeout(function () {
    // This will close the alert 500ms after the callback fires.
    swal.close();
  }, 500);
});

这篇关于Sweetalert像正常提示一样阻止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！