JS_js弹窗封装

柔情只为你懂 2022-11-19 05:26 179阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]  
调用：

xwToast({ 
        message:"成功提示",    //提示文字
        time:30000,              //关闭时间 设置默认3秒
        background:'#07c060',   //背景颜色 设置默认red
        color:"#fff",           //文字颜色 默认#fff
        showClose:true,         //是否显示关闭按钮
        autoClose:false,        //是否自动关闭 showClose为false则默认为true
    },res=>{                     //关闭回调 返回message值
        console.log(res);
    })

.js

.css

.xw_style{ 
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 350px;
        height: auto;
        margin: 0 auto;
    }
    .xw_style_list{ 
        width: 100%;
        height: 50px;
        color: #fff;
        background: red;
        line-height: 50px;
        padding: 0 20px;
        box-sizing: border-box;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        animation-name: xwhd;	
        animation-duration: 1s;
        animation-fill-mode: forwards;
        font-size: 14px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    .xw_style_des{ 
        position: absolute;
        right: 20px;
        font-size: 20px;
        cursor:pointer;
    }
    @keyframes xwhd{ 		/* 定义关键帧 hd动画名 */
        0%{ 
            opacity: 0;
            margin-top: 0px;
        }
        25%{ 
        }
        100%{ 
            opacity:1;
            margin-top: 20px;
        }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU5OTkzMQ_size_16_color_FFFFFF_t_70]: /images/20221022/7af6034d97af44b38df303b0da876bc7.png