[jQuery自定义插件] 2 自定义消息弹窗插件-jQueryToast

独行侠_阿涛

已于 2022-07-19 10:39:53 修改

阅读量851

点赞数

CC 4.0 BY-SA版权

分类专栏：前端0-1 文章标签： jquery 前端 javascript

于 2022-07-19 10:23:17 首次发布

本文链接：https://blog.csdn.net/wltsysterm/article/details/125866239

前端0-1 专栏收录该内容

61 篇文章 ¥49.90 ¥99.00

订阅专栏

超级会员免费看

本文档介绍了如何创建一个基于jQuery的自定义消息弹窗插件jQueryToast，包括其目录结构、使用方法及依赖。通过引入jQueryToast.js和jquery.js，插件会自动注入CSS。jQueryToast.css、jQueryToast.js、jQueryCache.js放置于lib目录，testToast.html位于HTML目录。插件支持设置内容、过期时间和文本对齐方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用多了市面上的各种ui框架，各种的消息弹窗类型。我选择其中的一种，我觉得比较好看的，去模仿实现了。

先上源码，再解释：

目录结构：

1 jQueryToast.css

.ftoast{
    position: fixed;
    top: 0;
    width: 351px;
    left: calc(50% - 175px);
    z-index: 10000;
}
.ftoast-div{
    position: relative;
    width: 350px;
    min-height: 30px;
    border-radius: 5px;
    background-color: white;
    padding: 10px 5px 0px;
    margin-top: 10px;
}

.ftoast-content{
    margin-bottom: 10px;
}

.ftoast-expire{
    height: 2px;
    background-color: red;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
}

.ftoast-success{
    border: 1px soli