一个好看的消息提示框--前端

引入以下两个插件即可 

    toastr.min.css">
    /web-icons/web-icons.min.css"> 

使用时 直接调用封装好的   

成功时是fnCreateAlert(dt.message,true);  // 绿色提示框

失败时是fnCreateAlert(dt.error,false); // 黄色提示框

 

    function fnCreateAlert(msg,trueOrFalse){
        var className="";
        if(trueOrFalse){
            className="toast-success";
        }else{
            className="toast-warning";
        }
    var oDiv = $('

');
    oDiv.addClass('toast-top-right');
    oDiv.attr({
        id:'toast-top-right',
        'aria-live':'polite',
        role:'alert'
    });
    oDiv.html('

'+
             '

提示

'+
            '

'+msg+'

'+
        '

');
    oDiv.css('top','-80px');
    oDiv.animate({top:12},1000,function(){
        setTimeout(function(){
            oDiv.animate({opacity:0},800,function(){
                oDiv.remove();
            });
        },2000);
    });
    $('body').append(oDiv);
    }