我正在尝试让通知出现并在 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>
最佳答案
你在你的 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();
});
关于javascript - 为什么我的 css 文件不适用于 MCV 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36569995/