`

jquery 消息插件--仿QQ消息弹出提醒

阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MESSAGER插件</title>
<script src="jquery-1.4.2.js"></script>
<script src="jquery.messager.js"></script>
<script>
$(document).ready(function(){
	$.messager.show(0,'Jquery Messager消息弹出插件!');
	$("#showMessager300x200").click(function(){
		$.messager.lays(300, 200);
		$.messager.show(0, '300x200的消息');
	});
	$("#showMessagerFadeIn").click(function(){
		$.messager.anim('fade', 2000);
		$.messager.show(0, 'fadeIn动画消息');
	});
	$("#showMessagerShow").click(function(){
		$.messager.anim('show', 1000);
		$.messager.show(0, 'show动画消息');
	});
	$("#showMessagerDim").click(function(){
		$.messager.show('<font color=red>自定义标题</font>', '<font color=green style="font-size:14px;font-weight:bold;">自定义内容</font>');
	});
	$("#showMessagerSec").click(function(){
		$.messager.show(0, '一秒钟关闭消息', 1000);
	});
	$("#showMessagerNoClose").click(function(){
		$.messager.show('不会关闭的消息', '要自己点关闭的X才可以哦!', 0);
	});
});
</script>
<style type="text/css">
<!--
body,td,th { font-size: 12px; }
body { background-color: #fefefe; }
p	{ width:80%; height:auto; padding:10px; background-color:#D6F097; border:solid 1px #FF9900; color:#333; margin-left:auto; margin-right:auto;}
input	{ background-color:#F5D99E; color:#333; border:solid 1px #993300; font-size:12px;}
p.new input	{ background-color:#FF0000; color:#fff;}
-->
</style>
</head>

<body>
<h2>JQUEYR PLUGIN - Messager</h2>
<p><input type="button" id="showMessager300x200" value="显示一个300x200的消息" /></p>
<p><input type="button" id="showMessagerFadeIn" value="显示一个fadeIn动画消息" /></p>
<p><input type="button" id="showMessagerShow" value="显示一个show动画消息" /></p>
<p><input type="button" id="showMessagerDim" value="显示定义内容和标题消息" /></p>
<p><input type="button" id="showMessagerSec" value="一秒钟关闭消息" /></p>
<p class="new"><input type="button" id="showMessagerNoClose" value="不自动关闭消息" /></p>
</body>

</html>

 

来自:http://zhg.me/demo/messager/

 

点击下载Demo

 

 

博客已移至http://blog.aboutc.net/欢迎访问

分享到:
评论
5 楼 jiangleizzz 2015-10-07  
good
4 楼 liuweihug 2014-07-26  
你这个不错,看看这个。jquery message tooltip告警提示信息展示控件 - 前端编程 - IT工作生活这点事。Just Such So!
http://www.suchso.com/UIweb/jquery-message-tooltip-warning-error-show.html
3 楼 wangshunfan 2014-01-06  
还不错哦
2 楼 Ueaner 2012-08-24  
cui_angel 写道
消息框可以动态加载内容吗?

可以加载动态内容,但是跟消息框没有太大关系
1 楼 cui_angel 2012-08-03  
消息框可以动态加载内容吗?

相关推荐

Global site tag (gtag.js) - Google Analytics