笔记 - 自定义toast 小提示弹框

最新推荐文章于 2025-06-08 19:15:16 发布

原创最新推荐文章于 2025-06-08 19:15:16 发布 · 1.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#web #html #css

前端开发专栏收录该内容

28 篇文章

订阅专栏

本文介绍了在项目中创建自定义的Web Toast提示框的方法，将js代码置于公共js文件，实现全局调用。文章提供了相关代码示例，并提到了移动端的弹框类型，如Toast、Snackbars和Alert。

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

项目中常用到一些小组件，如toast/alert 弹框，关于toast提示框，貌似一般在移动端说得比较多。。。嗯，项目中就叫它toast提示框吧。（关于移动端弹框，参考：APP提示框架详解：Toast提示、Snackbars和Alert

以下为自定义的Web toast小提示框，js代码放在公共js文件中，可以全局调用，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="css/common.css">-->
    <style>
        *{
            margin:0;
            padding: 0;
        }
        .pop-toast {
            position: fixed;
            max-width: 250px;
            line-height: 40px;
            height: 40px;
            text-align: center;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            background: #fff;
            border: 1px solid #ccc;
            background: rgba(0, 0, 0, 0.6);
            -webkit-box-shadow: 0 2px 8px #ccc;
            -moz-box-shadow: 0 2px 8px #ccc;
            box-shadow: 0 2px 8px #ccc;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            z-index: 1000000;
        }
        .pop-toast .toast-tip {
            font-size: 16px;
            color: #fff;
            height: 100%;
        }

    </style>
</head>
<body>
<a href="javascript:;" class="btn">toast 弹框</a>

<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(".btn").on("click",function () {
        popToast("测试测试测试");
    });

    /**
     * toast 小提示框
     * @param tipTxt 提示内容
     */
    function popToast(tipTxt) {
        var $popToast = $(".pop-toast");
        $popToast.remove();
        var popToastHtml = '<div class="pop-toast">\n' +
            '            <p class="toast-tip">' + tipTxt + '</p>\n' +
            '        </div>';
        $popToast = $(popToastHtml);
        $("body").append($popToast);
        setTimeout(function () {
            $popToast.fadeOut();
        }, 2000);
    }
</script>
</body>
</html>

效果图：
这里写图片描述