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

因此一月份 SweetAlert2 100% 正常。成功和错误图标上没有错误。但二月之后,图标看起来很奇怪,动画也很糟糕。

我尝试更新 CDN,因为 2 天前 SweetAlert2 更新了。但问题仍然没有解决。也许你可以帮助我。


这是代码。我正在使用 flashdata 来显示警报。

<?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;?>


一只甜甜圈
浏览 152回答 3
3回答

慕桂英4014372

这是因为您在html or body标签中使用的字体/字体样式,特别是如果您在全球范围内申请<p> <a> <span>标签,就会发生这种情况。body尝试在tag 的子元素或除body或之外的最高父元素中添加字体样式html。

慕村9548890

升级到v9.xSweetAlert2。动画对我来说看起来不错。Swal.fire({  icon: 'success',  title: 'Kamu berhasil daftar!',  text: 'Silahkan Cek Email Kamu, Buat Verifikasi!',  showConfirmButton: false,  timer: 2500})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>

忽然笑

<span>同样的问题在这里:它发生是因为文档其余部分的 font-size 属性。在我的例子中,为了解决这个问题,我强制将字体大小更改为 16px 到“创建”成功和错误图标的特定类元素。对于成功图标:.swal2-success-line-tip, .swal2-success-line-long {&nbsp; font-size: 16px !important;}对于错误图标:.swal2-x-mark-line-right, .swal2-x-mark-line-left {&nbsp; font-size: 16px !important;}&nbsp;它可能不是最优雅的解决方案,但它确实有效。
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

Html5