出于需要,写了一段 jQuery 代码,来实现以下功能:
1.错误提示信息显示在浏览器中央。
2.这条信息在3秒后自动消失。
jQuery将元素绝对居中的关键代码:
代码如下 | 复制代码 |
jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); return this; } |
之后就可以这样使用:
代码如下 | 复制代码 |
$('.messages').center(); |
完整代码如下:
代码如下 | 复制代码 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>显示在浏览器中央的错误信息</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script type="text/javascript"> jQuery.fn.center = function () { this.css("position","absolute"); this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px"); this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px"); return this; } function removeMessages(){ $('.messages').delay(3000).fadeOut(1000); } $(document).ready(function(){ $('.messages').center(); setTimeout(removeMessages(),1000); }); </script> <style type="text/css"> .messages { border:2px solid red; padding:10px; z-index:100; } </style> </head> <body> <div class="messages">错误信息,<br />3秒后隐藏。</div> <input type=button value="刷新" onclick="Javascript:self.location.reload()"> </body> </html> |
时间: 2024-10-13 18:07:50