baoshi-was/resources/js/utilities/toast.js

window.toast={
    container : function (){
        let div = $("<div style='position: fixed;top:0;width: 100%;z-index: 9999'></div>");
        $("body").append(div);
        return div;
    }(),
    setIndex : function (num){
        this.container.css("z-index",num);
    },
    build:function (model,msg,duration){
        let div = $("<div class='d-flex justify-content-center align-items-center p-2'></div>");
        let toast = $("<div class='toast hide'></div>");
        toast.attr("role","alert");
        toast.attr("aria-live","assertive");
        toast.attr("aria-atomic","true");
        toast.attr("data-delay",duration);
        let info = $("<div style='min-width: 400px'></div>")
        let txt = $("<div class='ml-3'></div>");
        let i = $("<i></i>");
        switch (model){
            case "success":
                info.css("background","RGB(240,249,235)");
                info.addClass("toast-body text-success");
                i.addClass("fa fa-chevron-circle-down text-success");
                break;
            case "fail":
                info.css("background","RGB(255,240,240)");
                info.addClass("toast-body text-danger");
                i.addClass("fa fa-times-circle text-danger");
        }
        txt.append(i);
        txt.append(msg);
        info.append(txt);
        toast.append(info);
        div.append(toast);
        this.container.append(div);
        toast.toast("show");
        toast.on("hidden.bs.toast",function (){
            div.remove();
        });
    },
    success : function (msg = "SUCCESS!",duration = 2000){
        this.build("success",msg,duration)
    },
    error : function (msg = "ERROR!",duration = 3000){
        this.build("fail",msg,duration)
    },
};