原生javascript弹层弹窗插件Xtiper使用

最新推荐文章于 2022-07-20 17:11:24 发布

飞鸟flyboy

最新推荐文章于 2022-07-20 17:11:24 发布

阅读量946

点赞数

分类专栏： html javascript

本文链接：https://blog.csdn.net/a5251199/article/details/104632259

版权

本文介绍了如何使用Xtiper这个原生JavaScript弹层弹窗插件。通过引入jq和css文件，可以方便地实现各种类型的通知，如成功、失败、警告、询问等，并能自定义图标和样式。

摘要由CSDN通过智能技术生成

只需要吧jq和css存到目标路径下

.xtiper_icon_success {background-image:url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M512.7 0.1C230.4 0.1 0.8 229.8 0.8 512.1c0 282.3 229.6 511.9 511.0 511.9 282.3 0 511.9-229.6 511.9-511.9C1024.6 229.8 795.0 0.1 512.7 0.1z m0 950.5c-241.8 0-438.5-196.7-438.5-438.5 0-241.8 196.7-438.5 438.5-438.5 241.7 0 438.5 196.6 438.5 438.5-0.0 241.7-196.8 438.5-438.5 438.5z' fill='%2337b72c'/%3E%3Cpath d='M754.8 337.0L470.1 630.1l-178.5-155.2c-15.8-13.7-39.7-12.0-53.4 3.7-13.7 15.8-12.0 39.7 3.7 53.4l205.2 178.4a37.7 37.7 0 0 0 10.9 6.7 37.8 37.8 0 0 0 15.9 2.7 37.9 37.9 0 0 0 15.2-3.0c0.0-0.0 0.0 0.0 0.0-0.0a37.7 37.7 0 0 0 10.4-7.7l309.4-317.5c14.6-14.0 14.3-38.9-0.7-53.5-14.0-14.6-38.9-14.3-53.5 0.7z' fill='%2337b72c'/%3E%3C/svg%3E");}

先url解码之后，修改fill即可修改