代码之家 › 专栏 › 技术社区 › contrariwise

sweetalert2中按钮延迟出现

sweetalert2 sweetalert alert javascript

contrariwise · 技术社区 · 8 年前

反馈中的字符数因屏幕而异,因此,我使用sweetalert2的计时器参数为文本中字符数的倍数。但是,计时器功能并不完善,因为人们的阅读速度不同。理想情况下,我希望“OK”按钮在计时器超时后出现。是否可以进行某种API调用来动态更改警报框的属性?

swal({
        html: feedback,
        timer: feedback.length*50,
        showCloseButton: false,
        showCancelButton: false,
        showConfirmButton: false,
        allowOutsideClick: false,
    });

2 回复 | 直到 8 年前

Slai 8 年前

swal({
  html: 'test',
  allowOutsideClick: false,
  allowEscapeKey: false,

  onOpen: function () {
    swal.disableButtons();
    setTimeout(swal.enableButtons, 'test'.length * 500) 
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css">

或者使其透明:

swal({
  html: 'test',
  allowOutsideClick: false,
  allowEscapeKey: false,

  onOpen: function () {
    var b = swal.getConfirmButton()
    b.style.opacity = 0
    b.disabled = true
    
    setTimeout(function() {
      b.disabled = false
      b.style.opacity = 1
    }, 'test'.length * 500) 
  }
})

<<link rel=“样式表”href=”https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css“>

或隐藏并显示:

swal({
  html: 'test',
  allowOutsideClick: false,
  allowEscapeKey: false,

  onOpen: function () {
    var b = swal.getConfirmButton()
    b.hidden = true
    b.disabled = true
    
    setTimeout(function() {
      b.disabled = false
      b.hidden = false
    }, 'test'.length * 500) 
  }
})

<<link rel=“样式表”href=”https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/6.6.9/sweetalert2.min.css“>

Hayden Passmore 8 年前

您好,要实现这一点,您可以使用设置超时函数并在希望显示的按钮上调用jQuery的.show()函数(假设您可以使用jQuery)。

下面的代码应该可以帮助您

swal({
        html: feedback,
        timer: feedback.length*50,
        showCloseButton: false,
        showCancelButton: false,
        showConfirmButton: false,
        allowOutsideClick: false,
    });
    setTimeout(function () {
        $(".swal2-cancel").show();
        $(".swal2-confirm").show();
        $(".swal2-close").show();
    }, 3000);

推荐文章

danjbh · 防止使用sweet alert提交表单时出现默认值

8 年前

GermanCoder · 如何使用SweetAlert2重置CKeditor4

8 年前

Ali Zia · 带正确消息的Sweet Alert自定义正则表达式验证

8 年前

hungrybeast · SweetAlert2从自定义HTML中的输入获取值

8 年前

rupesh · 在Sweet alert 2中传递PHP variabe

8 年前

Dave Anderson · 翡翠色Sweetalert2

8 年前

Maverik Minett · 将引导DatetimePicker与Sweet Alert 2一起使用-在警报上显示日历

8 年前

Sam Banana · Sweet Alert显示成功,但未删除记录

8 年前

contrariwise · sweetalert2中按钮延迟出现

8 年前

gbenga wale · 自定义sweetalert2输出原始json

8 年前