JavaScript 实现自定义 toast

chengqiuming

已于 2022-10-19 17:28:55 修改

阅读量675

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

于 2022-10-19 15:37:28 首次发布

本文链接：https://blog.csdn.net/chengqiuming/article/details/127409210

版权

这篇博客介绍了如何使用JavaScript和CSS创建一个简单的页面提示组件，即toast。通过定义关键帧动画实现显示和隐藏的过渡效果，设置样式使toast在页面中央显示，并提供了展示和隐藏toast的JS函数。此外，还给出了在特定场景下（如onLoadSuccess事件）调用toast函数的示例。

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

一样式

    <style type="text/css">
        @keyframes show {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }
        @keyframes hide {
            0% {
                opacity: 1;
            }


            100% {
                opacity: 0;
            }
        }
        .toast_box {
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            /*background-color: rgba(0,0,0,0.5);*/
            overflow: hidden;
            display: none;
        }
        .toast_box p {
            position: absolute;
            bottom: 50%;
            left: 50%;
            z-index: 10;
            transform: translate(-50%, -50%);

            box-sizing: border-box;
            padding: 10px 20px;
            width: 350px;
            /* 提示框的背景色 */
            background: #707070;