提示框简单封装

jQuery封装

css

.myToast,.myToast{
    position: fixed;
    top:50%;
    left:50%;
    z-index: 1000;
    color:#fff;
    text-align: center;
    border-radius: 0.2rem;;
    transform:translate(-50%,-50%);
    white-space: nowrap;
    font-size: 0.52rem;
    padding:0.3rem 0.4rem;
    background-color: rgba(0,0,0,0.75);
}

js

function  toast(msg,time){
        var el = $('<span class="myToast">'+msg+'</span>');
        $('body').append(el)
        setTimeout(function(){
            el.remove();
        },time||2000)
    }

 

js封装

css

@font-face {
    font-family: 'iconfont';
    /* project id 1564527 */
    src: url('https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.eot');
    src: url('https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.eot?#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.woff2') format('woff2'),
        url('https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.woff') format('woff'),
        url('https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.ttf') format('truetype'),
        url('https://at.alicdn.com/t/font_1564527_h2bpydgx1xv.svg#iconfont') format('svg');
}

.message {
    position: fixed;
    padding: 15px;
    border: 1px solid;
    left: 50%;
    top: 50%;
    /* 让元素的css属性在0.2秒内完成变化 */
    transition: 0.2s;
    /* 变形：向左平移自身宽度的一半，向上平移自身高度的一半 */
    transform: translate(-50%, -50%);
    /* 圆角边框 */
    border-radius: 5px;
}

.message .icon {
    font-family: iconfont;
    display: inline-block;
    margin: 0 7px;
}

.message .content {
    display: inline-block;
}

/* 普通信息的样式 */
.message.info {
    border-color: #d8e3fd;
    background-color: #edf2fc;
    color: #727479;
}

.message.info .icon::before {
    content: "\e6bc";
}

/* 成功的样式 */
.message.success {
    border-color: #e1f3d8;
    background-color: #f0f9eb;
    color: #67C23A;
}

.message.success .icon::before {
    content: "\e61e";
}

/* 警告的样式 */
.message.warn {
    border-color: #faecd8;
    background-color: #fdf6ec;
    color: #E6A23C;
}

.message.warn .icon::before {
    content: "\e604";
}


/* 错误的样式 */
.message.error {
    border-color: #fde2e2;
    background-color: #fef0f0;
    color: #F56C6C;
}

.message.error .icon::before {
    content: "\e62b";
}

 

 

js

/
 * 这个函数，才是真正实现功能的函数
 * @param option 一个对象，配置对象
 */
function _message(option) {
    // 生成一个最终的配置，如果用户传递的配置不存在，则使用默认值
    // 对象混合
    var defaultOption = { //该对象提供所有属性的默认值
        type: "info", //消息类型： info、warn、error、success
        content: "", //消息提示内容
        duration: 1, //多少秒后关闭
        onClose: null //关闭后的回调
    }
    // Object.assign  混合对象
    var opt = Object.assign({}, defaultOption, option)

    // 根据opt对象中的配置创建div

    var div = document.createElement("div");
    div.className = "message " + opt.type;
    div.innerHTML = "<div class=\"icon\"></div><div class=\"content\">" + opt.content + "</div>"
    //为了实现动画，添加div的时候，要将它设置为最小
    div.style.transform = "translate(-50%, -50%) scale(0)";
    document.body.appendChild(div);
    //强行让浏览器进行渲染：只要出现读取某个元素最终样式（位置、尺寸）的代码
        getComputedStyle(div).top; //这句代码除了让浏览器强行渲染之外，没有任何其他意义

    //将div变回原来的大小
    div.style.transform = "translate(-50%, -50%) scale(1)";

    setTimeout(close, opt.duration * 1000);

    function close() {
        div.style.transform = "translate(-50%, -50%) scale(0)";
        setTimeout(function () {
            div.remove();
            if (opt.onClose) {
                //传递了回调函数
                opt.onClose();
            }
        }, 200)
    }
}

/**
 * 提供给外面的人调用的函数
 */
function message() {
    //根据参数的情况，构造出合适的对象，调用 _message 
    if (arguments.length === 0) {
        //没有参数
        _message({});
    }
    else if (arguments.length === 1) {
        //有一个参数
        if (typeof arguments[0] === "object") {
            _message(arguments[0]); //第一个参数就是对象
        }
        else {
            _message({
                content: arguments[0]
            })
        }
    }
    else {
        //参数数量大于等于2，这种情况只需要前两个参数即可
        _message({
            content: arguments[0],
            type: arguments[1]
        })
    }
}

 

HTML.

 btnInfo.onclick = function() {
            message("一个普通的提示")
        }

        btnSuccess.onclick = function() {
            message("成功的提示", "success")
        }

        btnWarn.onclick = function() {
            message({
                content: "一个警告，3秒后消失",
                duration: 3, //3秒后消失
                type: "warn"
            });
        }

        btnError.onclick = function() {
            message({
                content: "错误提示，带有回调",
                type: "error",
                onClose: function() {
                    console.log("提示关闭了")
                }
            })
        }

 

 

 

....