利用构造函数jq封装往页面添加提示语

以上就是样式
来看js文件

/* 
//显示loading和success弹窗示例

//显示
showSpring.shower(1,'复制成功')//显示复制成功
showSpring.shower(2,'复制失败')//显示复制失败
showSpring.shower(3,'注意不可复制')//显示注意不可复制
showSpring.shower(4,'这是一条消息')//显示这是一条消息
showSpring.shower(2,'复制成功',2000)//显示成功图片，延迟2秒自动关闭
showSpring.hide()//关闭遮罩
 */

(function (global) {

    function ShowSpring () {

        if (!global.jQuery) {
            throw new Error('jQuery.js is required!');
            return null;
        }
        this.opt = {};
        this.timer = null;
        this.init();
    }
    ShowSpring.prototype = {
        constructor: ShowSpring,
        init: function () {
            this.addCss();
            this.addHtml();
        },
        shower: function (type, text, closeTime) {
            // 根据类型和文本来确定展示哪些内容
            // closeTime自动关闭弹窗
            $(".show-spring-inner").attr('type',type)
            $(".show-spring-images").attr('type', type);
            $(".show-spring-tips").text(text);
            $(".show-spring-inner").show();
            clearTimeout(this.timer);
            if (closeTime > 0) {
                this.timer = setTimeout(function () {
                    $(".show-spring-inner").hide();
                }, closeTime);
            }
        },

        hide: function () {
            //隐藏所有弹窗
            $(".show-spring-inner").hide();
        },
        addHtml: function (opt) {
            if ($('.show-spring-inner').length === 0) {
                var html ='<div class="show-spring-inner">'
                    + '<div class="show-spring-images"></div>'
                    + '<p class="show-spring-tips"></p>'
                    + '<div>'
                $('body').append(html);
            }
        },

        addCss: function (opt) {
            if ($('.show-loading-css').length === 0) {
                var css = '<style class="show-loading-css">'
                    + '.show-spring-inner{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);width: 420px; height: 45px; border: none; background: #ddecca; color: #91bf55;border-radius:5px; border:1px solid #91bf55;padding: 5px 50px; margin: auto;text-align: center; font-family: 微软雅黑; display:none;}'
                    + '.show-spring-inner[type ="2"]{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);min-width: 328px;height: 45px; border: none;background: #faf0f0; border-radius:5px; border:1px solid #e37470; color: #e37470; padding: 5px 50px; margin: auto; text-align: center; font-family: 微软雅黑;}'
                    + '.show-spring-inner[type ="3"]{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);min-width: 328px; height: 45px;  border: none; background: #ecf4fb; border-radius:5px; border:1px solid #5f98e6; color: #5f98e6; padding: 5px 50px; margin: auto; text-align: center; font-family: 微软雅黑;}'
                    + '.show-spring-inner[type ="4"]{ position: absolute;top: 5%;left: 50%;transform: translate(-50%);min-width: 328px; height: 45px;  border: none; background: #fdf8e9; border-radius:5px; border:1px solid #e3b240; color: #e3b240; padding: 5px 50px; margin: auto; text-align: center; font-family: 微软雅黑;}'
                    + '.show-spring-images{background: url("/osp2016/images/agent2016/show-success.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
                    + '.show-spring-images[type="2"]{background:url("/osp2016/images/agent2016/show-fail.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
                    + '.show-spring-images[type="3"]{background:url("/osp2016/images/agent2016/show-xiaoxi.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
                    + '.show-spring-images[type="4"]{background:url("/osp2016/images/agent2016/show-warning.png") no-repeat center;background-size: 20px;display: block; width: 20px; height: 20px; margin: 7px 10px 9px 115px;float:left;}'
                    + '.show-spring-tips{ font-size: 15px;  float:left;line-height: 35px;}'
                    + '<style>';
                $('body').append(css);
            }
        },

    }
    global.showSpring = new ShowSpring();

})(window)

html
一定要先把这个js引入进去才可以
不然会报错 也有可能报错执行顺序的问题

 // 添加链接
        $(document).on("click",".read-link-add",function(){
            $.ajax({
                type:"get",
                url:knowledgelink,
                data:{kId:knowlinkid},
                dataType: "json",
                success:function (res) {
                    if(res.code == '0'){
                        showSpring.shower(1,'复制成功',1000)//复制成功
                    }else{
                        showSpring.shower(2,'网络波动,请稍后重试',1000)
                    }
                }
            });
        })

调用接口成功之后出现提示语