javascript 如何修复奇怪的成功和错误图标在SweetAlert2?

eoigrqb6  于 2022-10-30  发布在  Java
关注(0)|答案(3)|浏览(187)

所以在一月份的时候Sweetalert 2是100%正常的。成功和错误图标上没有bug。但是在二月份之后,图标看起来很奇怪,动画也很糟糕。
我已经尝试更新CDN,因为2天前SweetAlert 2更新。但仍然没有解决的问题。也许你可以帮助我。
这张图片:
Success icon error
Error icon error
这是代码,我用闪存数据来显示警报.

<?php if ($this->session->flashdata('success-reg')): ?>
<script>
Swal.fire({
    icon: 'success',
    title: 'Kamu berhasil daftar!',
    text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',
    showConfirmButton: false,
    timer: 2500
})
</script>
<?php endif;?>
vktxenjb

vktxenjb1#

这是因为您在html or body标记中使用的字体/字体样式,特别是在全局应用<p> <a> <span>标记时,会发生这种情况。
请尝试在body标记的子元素或bodyhtml以外的最高父元素中添加字体样式。

ejk8hzay

ejk8hzay2#

升级到SweetAlert2的v9.x。我觉得动画效果不错。
第一个

dtcbnfnu

dtcbnfnu3#

同样的问题在这里:这是因为<span>的font-size属性在文档的其余部分。在我的情况下,为了解决这个问题,我被迫将font-size更改为16 px,以“创建”成功和错误图标的特定类元素。

  • 成功图标:
.swal2-success-line-tip, .swal2-success-line-long {
  font-size: 16px !important;
}
  • 对于错误图标:
.swal2-x-mark-line-right, .swal2-x-mark-line-left {
  font-size: 16px !important;
}

这可能不是最优雅的解决方案,但它是有效的。

相关问题