我可以在顶部打印一条消息,但 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>
最佳答案
试试这个,我对你的 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
关于javascript - 创建一个通知栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21983565/