Question

我试图在5秒后显示通知并淡出。它正在工作，通知显示成功，但没有风格，我不明白为什么会这样。我的问题是为什么盒子CSS文件在我的页面中不起作用？

.alert-box {
    color: #555;
    border-radius: 10px;
    font-family: Tahoma, Geneva, Arial, sans-serif;
    font-size: 11px;
    padding: 10px 36px;
    margin: 10px;
}

.alert-box span {
    font-weight: bold;
    text-transform: uppercase;
}

.error {
    background: #ffecec url('images/error.png') no-repeat 10px 50%;
    border: 1px solid #f5aca6;
}

.success {
    background: #e9ffd9 url('images/success.png') no-repeat 10px 50%;
    border: 1px solid #a6ca8a;
}

.warning {
    background: #fff8c4 url('images/warning.png') no-repeat 10px 50%;
    border: 1px solid #f2c779;
}

.notice {
    background: #e3f7fc url('images/notice.png') no-repeat 10px 50%;
    border: 1px solid #8ed9f6;
}

var turn = false;

function Error(turn) {
    if (turn == true) {

        if (!$('.alert-box').length) {
            $('<div alert-box notice" ><span>notice: </span>Wrong password or username!</div>').prependTo('#Not').delay(5000).fadeOut(1000, function() {
                $('.alert-box').remove();
            });
        };
    };
};

$(document).ready(function() {
    $('#savedata').click(function(e) {
        e.preventDefault();
        var data = {
            username: function() {
                return $("#form-name").val();
            },
            password: function() {
                return $("#form-password").val();
            }
        };
        if ($("#form-name").val() == "" || $("#form-password").val() == "") {
            // alert("error");
            Error(true);
        }
    });
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>@ViewBag.Title </title>
        <link href="~/Content/login.css" rel="stylesheet" type="text/css" />
        <link href="~/Content/box.css" rel="stylesheet" type="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">     </script>
    </head>
    <body>
        <div class="container">
            <div class="login-form">
                <div>
                    <img class="login-logo" src="~/images/hn-logo.png" />
                    <div id="Not"></div>
                    <div class="input-login">
                        @RenderBody()
                    </div>
                </div>
            </div>

        </div>
        <script src="~/Js/Notifcation.js"></script>
    </body>
</html>

Answer 1

您错过了div中的class属性，请尝试将js代码更改为此

$('<div class="alert-box notice" ><span>notice: </span>Wrong password or username!</div>').prependTo('#Not').delay(5000).fadeOut(1000, function () {
    $('.alert-box').remove();
});

Answer 2

不应该

$('<div class="alert-box notice" ><span>notice: </span>Wrong password or username!</div>').prependTo('#Not').delay(5000).fadeOut(1000, function () {

为什么我的css文件不能与MCV项目一起使用？

2 个答案: