javascript - 创建一个通知栏

Question

我可以在顶部打印一条消息，但 CSS 无法正常工作。我希望它看起来像这样并放在底部:

此外，这是一条错误消息，我希望颜色为红色并显示 4000 毫秒，否则如果成功，我希望它为绿色并显示 1000 毫秒。如果通知栏已经显示，我想将通知栏切换到新通知栏。

到目前为止的代码:

function error(msg) {
    $('<div/>').prependTo('body').addClass('#notify-error').html(msg).slideDown();
}

function success(msg) {
    $('<div/>').prependTo('body').addClass('#notify-success').html(msg).slideDown();
}


    $('#notify-error').click(function () {
        $(this).slideUp().empty();
    });

    $('#notify-success').click(function () {
        $(this).slideUp().empty();
    });

error('Error!');
success('Success!');

/* css: */

     #notify-success {
        position:relative;
        width:100%;
        background-color:green;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
    }
    
     #notify-error {
        position:relative;
        width:100%;
        background-color:red;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jsfiddle

Answer 1

试试这个，我对你的 JS 和 CSS 做了一些修改。

在您的 js 中，您正在添加一个带有 # 的类，例如 addClass('#notify-error') 表示 id，因此我已将其从 JS 函数中删除错误(msg) 和成功(msg)

/* JS */

    function error(msg) {
        $('<div/>').prependTo('body').addClass('notify-error').html(msg).slideDown();
    }
    
    function success(msg) {
        $('<div/>').prependTo('body').addClass('notify-success').html(msg).slideDown();
    }
    
    
        $('#notify-error').click(function () {
            $(this).slideUp().empty();
        });
    
        $('#notify-success').click(function () {
            $(this).slideUp().empty();
        });
    
    
    error('Error!');
    success('Success!');

/* CSS */

    .notify-success {
        position:relative;
        width:100%;
        background-color:green;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
    }
    
     .notify-error {
        position:relative;
        width:100%;
        background-color:red;
        height:30px;
        color:white;
        display:none;
        text-align:center;
        padding:5px;
        font-size:2em;
        line-height:1em;
        font-family: Arial, sans-serif;
        border:2px solid #666;
        cursor:pointer;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

查看您的 UPDATE FIDDLE