layui提示框改造右下通知框（参考svg）

实现后样式：

1.首先创建CSS样式：

@import url('https://fonts.googleapis.com/css?family=Raleway:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i');


.toast__container {
    display: table-cell;
    vertical-align: middle;
}

.toast__cell{
    display:inline-block;
}

.add-margin{
    margin-top:0px;
}

.toast__svg{
    fill:#fff;
}

.toast {
    text-align:left;
    padding: 21px 0;
    background-color:#fff;
    border-radius:4px;
    max-width: 500px;
    top: 0px;
    position:relative;
    box-shadow: 1px 7px 14px -5px rgba(0,0,0,0.2);
}


.toast:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-top-left-radius:4px;
    border-bottom-left-radius: 4px;

}

.toast__icon{
    position:absolute;
    top:50%;
    left:22px;
    transform:translateY(-50%);
    width:14px;
    height:14px;
    padding: 7px;
    border-radius:50%;
    display:inline-block;
}

.toast__type {
    color: #3e3e3e;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
}

.toast__message {
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
    color: #878787;
}

.toast__content{
    padding-left:70px;
    padding-right:60px;
}

.toast__close {
    position: absolute;
    right: 22px;
    top: 50%;
    width: 14px;
    cursor:pointer;
    height: 14px;
    fill:#878787;
    transform: translateY(-50%);
}

.toast--green .toast__icon{
    background-color:#2BDE3F;
}

.toast--green:before{
    background-color:#2BDE3F;
}

.toast--blue .toast__icon{
    background-color:#1D72F3;
}

.tole{
    background-color:#1D72F3;
}

.toast--yellow .toast__icon{
    background-color:#FFC007;
}

.toast--yellow:before{
    background-color:#FFC007;
}

2.创建JS（未使用方便我提出来专门一个JS）：

define(function(require, exports) {
    require('${appPath}/layui/layui.js');
    /**
     * 右下角提示框
     * @param title
     * @param info
     */
    exports.svgSendMsg=function (title,info,type) {
        $('head').find('link[href="${appPath}/layui/css/svg.css"]').remove();
        $('head').prepend("<link href='${appPath}/layui/css/svg.css' rel='stylesheet' type='text/css' />");
        layui.use('layer', function () {
            layer.open({
                offset: 'rb',
                title: false,
                area: ['350px', '85px'],
                shade: 0,
                type: 1,
                content: getContent(title,info,type),
                time: 10000,
                icon: 1,
                anim: 2
            });
        })

    }

    function getContent(title,info,type) {
        if(type==0){
            return '<div class="toast toast--green">' +
                '  <div class="toast__icon">' +
                '    <svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">' +
                '<g><g><path d="M504.502,75.496c-9.997-9.998-26.205-9.998-36.204,0L161.594,382.203L43.702,264.311c-9.997-9.998-26.205-9.997-36.204,0    c-9.998,9.997-9.998,26.205,0,36.203l135.994,135.992c9.994,9.997,26.214,9.99,36.204,0L504.502,111.7    C514.5,101.703,514.499,85.494,504.502,75.496z">path>' +
                'g>g>' +
                '    svg>' +
                '  div>' +
                '  <div class="toast__content">' +
                '    <p class="toast__type">'+title+'p>' +
                '    <p class="toast__message">'+info+'p>' +
                '  div>' +
                '  <div class="toast__close">' +
                '    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642"> ' +
                'svg>' +
                '  div>' +
                'div>'
        }else if(type==1){
            return '<div class="toast toast--blue add-margin">' +
                '  <div class="toast__icon">' +
                '<svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">' +
                '<g>' +
                '<g id="info">' +
                '<g>' +
                '<path  d="M10,16c1.105,0,2,0.895,2,2v8c0,1.105-0.895,2-2,2H8v4h16v-4h-1.992c-1.102,0-2-0.895-2-2L20,12H8     v4H10z">path>' +
                '<circle  cx="16" cy="4" r="4">circle>' +
                'g>' +
                'g>' +
                'g>' +
                '' +
                '    svg>' +
                '  div>' +
                '  <div class="toast__content">' +
                '    <p class="toast__type">'+title+'p>' +
                '    <p class="toast__message">'+info+'p>' +
                '  div>' +
                '  <div class="toast__close">' +
                '    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642">' +
                '' +
                'svg>' +
                '  div>' +
                'div>'
        }else{
            return '<div class="toast toast--yellow add-margin">' +
                '  <div class="toast__icon">' +
                '<svg version="1.1" class="toast__svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 301.691 301.691" style="enable-background:new 0 0 301.691 301.691;" xml:space="preserve">' +
                '<g>' +
                '<polygon points="119.151,0 129.6,218.406 172.06,218.406 182.54,0  ">polygon>' +
                '<rect x="130.563" y="261.168" width="40.525" height="40.523">rect>' +
                'g>' +
                '    svg>' +
                '  div>' +
                '  <div class="toast__content">' +
                '    <p class="toast__type">'+title+'p>' +
                '    <p class="toast__message">'+info+'p>' +
                '  div>' +
                '  <div class="toast__close">' +
                '    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.642 15.642" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 15.642 15.642">' +
                'svg>' +
                '  div>' +
                'div>'
        }
    }
})