messager.js
(function (jQuery) { var window; var obj = new Object(); obj.version = '@1.0'; obj.title = '信息提示'; obj.time = 4000; obj.anims = { 'type': 'slide', 'speed': 600 }; obj.inits = function (title, text) { window = $('<div class="messager"><div class="messager-header"><div class="messager-close">×</div><div class="meaaager-title">'+title+'</div></div> <div class="messager-bottom"><div class="messager_content">'+text+'</div></div></div>') .appendTo('body') .hide(); window.find('div.messager-close').click(function () { this.parentElement.parentElement.remove(); }); }; obj.show = function (title, text, time) { if (title == 0 || !title) title = obj.title; obj.inits(title, text); if (time >= 0) obj.time = time; switch (this.anims.type) { case 'slide': window.slideDown(obj.anims.speed); break; case 'fade': window.fadeIn(obj.anims.speed); break; case 'show': window.show(obj.anims.speed); break; default: window.slideDown(obj.anims.speed); break; } }; obj.anim = function (type, speed) { if (type != 0 && type) obj.anims.type = type; if (speed != 0 && speed) { switch (speed) { case 'slow':; break; case 'fast': obj.anims.speed = 200; break; case 'normal': obj.anims.speed = 400; break; default: obj.anims.speed = speed; } } } jQuery.messager = obj; return jQuery; })(jQuery);
messager.css
.messager { position: absolute; background: #E0ECFF; border: 1px solid #95B8E7; z-index: 10000; overflow: hidden; bottom: 0px; right: 0px; width: 200px; height: 100px; } .messager-header { border:1px solid #fff; border-bottom:none; width:100%; font-size:12px; overflow:hidden; height:25px; color:#1f336b; } .messager-close { float:right; padding:5px 0 5px 0; width:16px; color:red; font-size:12px; font-weight:bold; text-align:center; cursor:pointer; overflow:hidden; } .meaaager-title { padding:5px 0 5px 5px; width:100px; text-align:left; overflow:hidden; } .messager-bottom { padding-bottom:5px; border:1px solid #fff; border-top:none; width:100%; height:auto; font-size:12px; } .messager_content { margin:0 5px 0 5px; border:#b9c9ef 1px solid; padding:10px 0 10px 5px; font-size:12px; width:183px; height:50px; color:#1f336b; text-align:left; overflow:hidden; }
page
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AlarmData.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link href="messager.css" rel="stylesheet" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script src="messager.js"></script>
<script type="text/javascript">
$(function () {
$("#showMessagerNoClose").click(function () {
$.messager.show('不会关闭的消息', '要自己点关闭的X才可以哦！', 0);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="showMessagerNoClose" value="不自动关闭消息" />
</div>
</form>
</body>
</html>
参考地址：http://www.cnblogs.com/linyijia/p/3467109.html