我正在使用jQuery Validation Plugin在浏览器窗口的右上角成功显示消息。滚动页面时,该消息也会保留在视图中。我遇到的问题是当页面已经滚动到可以看到绝对右上角的位置时,在视图中显示初始消息。此时,只要页面滚动,消息就会显示在视图中,但我也希望消息在字段无效后立即显示在视图中。
<link rel="stylesheet" type="text/css" href="css/site.css" />
<script src="jquery/jquery.min-latest.js"></script>
<script src="jquery/jquery.validate.min.js"></script>
<script src="jquery/jquery.validate.dateUS.js"></script>
<script>
$(document).ready(function(){
// attach Validate plugin to form
$("#form").validate();
});
//scroll the message box to the top offset of browser's scroll bar
$(window).scroll(function(){
$('.error').animate({
top:$(window).scrollTop()+"px" },{queue: false, duration: 0
});
});
</script>
这是 site.css :
label.error {
position: absolute;
top: 0; right: 0;
z-index: 10;
text-align: center;
font-weight: bold;
font-size: small;
width: 150px;
border: 1px solid;
margin: 0px;
padding: 2px 2px 2px 2px;
color: #D63301;
background-color: #FFCCBA;
}
.error {
background-color: #FFCCBA;
}