基于jquery框架写的页面提示遮罩层(不重复搬砖)！！！

/**
 * 成功提示提示框盒子（底层依赖jq框架动画效果）
 * @param msg 提示信息
 * @param intime 淡入时间毫秒
 * @param outime 淡出时间毫秒
 */
function success_show_box(msg,intime,outime){
    $("#success_show_box").parent().remove();
    var div = document.createElement("div");
    div.innerHTML = "<div class='success_show_box' id='success_show_box' style='width: 100%;height: 100%;position: fixed;top: 0;background: rgba(21, 33, 47, 0.5);display: flex;z-index: 100000;color: white;font-size: 1rem'>"+
        "<div style='width: 100%;display: flex;align-items: center;justify-content: center;'>"+"<div>"+msg+"</div>"+"</div>"
        +"</div>";
    document.body.insertBefore(div, document.body.firstElementChild);
    $("#success_show_box").fadeIn(intime);//淡入遮罩层
    $("#success_show_box").fadeOut(outime);//淡出遮罩层
}



/**
 * 错误提示提示框盒子（底层依赖jq框架动画效果）
 * @param msg 提示信息
 * @param intime 淡入时间毫秒
 * @param outime 淡出时间毫秒
 */
function error_show_box(msg,intime,outime){
    $("#error_show_box").parent().remove();
    var div = document.createElement("div");
    div.innerHTML = "<div class='error_show_box' id='error_show_box' style='width: 100%;height: 100%;position: fixed;top: 0;background: rgba(21, 33, 47, 0.5);display: flex;z-index: 100000;color: white;font-size: 1rem'>"+
         "<div style='width: 100%;display: flex;align-items: center;justify-content: center;'>"+"<div>"+msg+"</div>"+"</div>"
        +"</div>";
    document.body.insertBefore(div, document.body.firstElementChild);
    $("#error_show_box").fadeIn(intime);//淡入遮罩层
    $("#error_show_box").fadeOut(outime);//淡出遮罩层
}

vue.js react.js 很诱人。。。但是有时候有些项目还是会用到jquery的，搬砖也得讲究效率，一些代码片段积累起来自己开发也会省事省心。有时候感觉能不用插件就不用，因为这样意味着系统变得臃肿，和各种前端的兼容性问题.

主要是页面中很多地方操作完要提示,这种提示框可以完成抽象出来，脱离前端的交互业务，看下图使用场景。

调用示例:error_show_box('请选择商品属性!',500,500);

                error_show_box('不可减少了哦!',500,500);

                success_show_box('提交订单成功!',500,500);