登录
当前位置： 首页 > 工具软件 > jQuery MsgBox > 使用案例 >

基于jQuery实现的右下角消息提示框MsgBox

宗冷勋
2023-12-01

最近对右下角的消息提示框进行了封装，有需要的可以拿来看看效果如何。下面开始贴上代码，并且进行必要的说明。

首先是css样式，如下所示

._f_r {
	z-index: 1050;
	position: fixed;
	font-size: 12px;
	text-align: left;
	clear: both;
	border-radius: 5px;
	width: 200px;
	height: 130px;
	top: 100%;
	left: 100%;
	border: 3px solid #AAD9E8;
	background-color: white;
	/* IE6改为绝对定位，并通过css表达式根据滚动位置更改top的值 */
	_position: absolute;
	_top: expression(eval(document.documentElement.scrollTop) );
}

._f_r_title {
	height: 22px;
	border-bottom: 1px solid #AABBCC;
	text-align: center;
	line-height: 22px;
	font-weight: bolder;
	margin-bottom: 3px;
	background-color: #E8F2FE;
}

._f_r_btn {
	float: right;
	cursor: pointer;
	border: 1px;
}

接着是MsgBox的js代码 

/*
 * 右下角消息提示框，使用说明
 * @param {Object} $
 * @memberOf {TypeName} 
 * @return {TypeName} 
 * 
 * 引入MsgBox.js以及msgbox.css然后，写如下一行代码即可
 * var box=$.MsgBox.show({
 *     title:'提示框标题',
 *     content:'提示框内容'
 * })
 * 返回一个MsgBox对象，该对象可以执行hide函数，即box.hide()便可关闭对应的MsgBox对象
 * 
 * $.MsgBox.autoHide({
 *     title:'提示框标题',
 *     content:'提示框内容'
 * })
 * 可以生成一个自动关闭的MsgBox，该方法没有返回的对象，也就是说，你不能很友好的操作该对象。
 */
(function($){
	var MsgBox=function(settings){
		var settings=$.extend({},MsgBox.defaults,settings);
		var resultBox=$('<div class="_f_r"><div class="_f_r_title"><strong style="float:left;">  '+settings.title+'</strong><b class="_f_r_btn">x </b></div><span style="padding: 10px;"></span></div>');
		resultBox.appendTo($("body")).find("span").text(settings.content);
		var boxTop=(1-(resultBox.height()+6)/$(window).height())*100+"%";
		var boxLeft=(1-(resultBox.width()+8)/$(window).width())*100+"%";
		resultBox.animate( {
			top:boxTop,
			left:boxLeft
		}, "slow").find("._f_r_btn").click(function() {
			resultBox.animate( {
				top:"100%",
				left:"100%"
			}, "slow");
			//消息窗口延时删除
			setTimeout(function() {
				resultBox.remove();
			}, 4000);
		});
		var brother=this;
		brother.resultBox=resultBox;
	}
	var	autoHide=function(settings) {
			var settings=$.extend({},MsgBox.defaults,settings);
			var resultBox=$('<div class="_f_r"><div class="_f_r_title"><strong style="float:left;">  '+settings.title+'</strong><b class="_f_r_btn">x </b></div><span style="padding: 10px;"></span></div>');
			resultBox.appendTo($("body")).find("span").text(settings.content);
			var boxTop=(1-(resultBox.height()+6)/$(window).height())*100+"%";
			var boxLeft=(1-(resultBox.width()+8)/$(window).width())*100+"%";
			resultBox.animate( {
				top : boxTop,
				left : boxLeft
			}, "slow").find("._f_r_btn").click(function() {
				resultBox.animate( {
					top:"100%",
					left:"100%"
				}, "slow");
			});
			//消息窗口延时消失
			setTimeout(function() {
				resultBox.animate( {
					top:"100%",
					left:"100%"
				}, "slow");
			}, 4000);
			//消息窗口延时删除
			setTimeout(function() {
				resultBox.remove();
			}, 8000);
		}
	
	MsgBox.defaults={
		title:'消息提示',
		content:''
	}
	
	$.MsgBox={
		show:function(settings){
			return new MsgBox(settings);
		},
		autoHide:function(settings) {
			autoHide(settings);
		}
	}
	
	MsgBox.prototype={
		hide:function(){
			var obj=this;
			var resultBox=obj.resultBox;
			resultBox.animate( {
				top : "100%",
				left : "100%"
			}, "slow");
			//消息窗口延时删除
			setTimeout(function() {
				resultBox.remove();
			}, 4000);
		}
	}
	
})(jQuery);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>CSS下拉菜单</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<script type="text/javascript">
startList = function() {
	if (document.all && document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i = 0; i < navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
			if (node.nodeName == "LI") {
				node.onmouseover = function() {
					this.className += " over";
				}
				node.onmouseout = function() {
					this.className = this.className.replace(" over", "");
				}
			}
		}
	}
}
window.onload = startList;
</script>
		<style type="text/css">
body {
	text-align: center;
	font-size: 12px;
}

#popimg {
	WIDTH: 770px;
	margin: 0 auto;
	text-align: center;
}

#popimg2 {
	WIDTH: 770px;
	margin: 0 auto;
	text-align: center;
	z-index: -1;
}

ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

li {
	position: relative;
	float: left;
	width: 110px;
}

li ul {
	position: absolute;
	display: none;
	top: 20px;
	left: 0;
}

li:hover ul,li.over ul {
	display: block;
}

ul li a {
	display: block;
	font-size: 12px;
	border: 1px solid #ccc;
	padding: 3px;
	margin-right: 1px;
	text-decoration: none;
	color: #777;
	background: #eee;
}

ul li a:hover {
	background-color: #f4f4f4;
}

#test {
	clear: both;
	background-color: #999999;
	width: 769px;
	height: 100px;
	margin: 0 auto;
}
</style>
<script type="text/javascript" src="../plugins/jquery/jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="../pzControls/msgbox/msgbox.css"/>
<script type="text/javascript" src="../pzControls/msgbox/MsgBox.js"></script>
<script type="text/javascript">
var box;
function sac(){
	//使用jQuery MsgBox命名空间下的show函数创建一个右下角消息提示框
	box=$.MsgBox.show({
		title:"右下角提示框",
		content:"提示消息"
	});
}
function sac1(){
	// 对应的右下角提示框执行关闭hide方法
	box.hide();
}
function sac2(){
	//使用jQuery MsgBox命名空间下的autoHide函数创建一个自动隐藏的右下角消息提示框
	$.MsgBox.autoHide({
		title:"右下角提示框2",
		content:"提示消息2"
	});
}
</script>
	</head>
	<body>
		<div id="popimg">
			<ul id="nav">
				<li>
					<a href="">图形图像</a>
					<ul>
						<li>
							<a href="/sort/list_11_203_1.shtml">Ajax/JavaScript</a>
						</li>
						<li>
							<a href="/sort/list_11_83_1.shtml">ExtJS</a>
						</li>
						<li>
							<a href="/sort/list_11_112_1.shtml">jQuery</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">参考</a>
					<ul>
						<li>
							<a href="/sort/list_8_165_1.shtml">多媒体技术</a>
						</li>
						<li>
							<a href="/sort/list_8_162_1.shtml">控件相关</a>
						</li>
						<li>
							<a href="/sort/list_8_160_1.shtml">图形处理</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">Ajax</a>
					<ul>
						<li>
							<a href="/sort/list_11_168_1.shtml">CSS特效</a>
						</li>
						<li>
							<a href="/sort/list_11_96_1.shtml">HTML</a>
						</li>
						<li>
							<a href="/sort/list_11_202_1.shtml">在线编辑器</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">教程类</a>
					<ul>
						<li>
							<a href="/sort/list_8_165_1.shtml">多媒体技术</a>
						</li>
						<li>
							<a href="/sort/list_8_162_1.shtml">控件相关</a>
						</li>
						<li>
							<a href="/sort/list_8_160_1.shtml">图形处理</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">参考</a>
					<ul>
						<li>
							<a href="/sort/list_11_203_1.shtml">Ajax/JavaScript</a>
						</li>
						<li>
							<a href="/sort/list_11_83_1.shtml">ExtJS</a>
						</li>
						<li>
							<a href="/sort/list_11_112_1.shtml">jQuery</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">VB源代码</a>
					<ul>
						<li>
							<a href="/sort/list_8_165_1.shtml">多媒体技术</a>
						</li>
						<li>
							<a href="/sort/list_8_162_1.shtml">控件相关</a>
						</li>
						<li>
							<a href="/sort/list_8_160_1.shtml">图形处理</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="">VC++</a>
					<ul>
						<li>
							<a href="/sort/list_8_163_1.shtml">界面编程</a>
						</li>
						<li>
							<a href="/sort/list_8_161_1.shtml">数据库应用</a>
						</li>
						<li>
							<a href="/sort/list_8_166_1.shtml">报表打印</a>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<div id="popimg2">
			<div id="test"></div>
		</div>
		<input type="button" value="弹出消息框1" οnclick="sac();"/>
		<input type="button" value="关闭消息框1" οnclick="sac1();"/>
		<input type="button" value="弹出消息框2并且自动消失" οnclick="sac2();"/>
	</body>
</html>

这个可当做插件来使用，简单，方便。

 类似资料：

相关阅读

纯JavaScript基于notie.js插件实现消息提示特效基于javascript实现右下角浮动广告效果基于.Net实现前端对话框和消息框WinForm实现自定义右下角提示效果的方法基于jquery实现的鼠标悬停提示案例

相关文章

Flask消息闪现Spring基于XML实现事务管理Spring基于注解实现事务管理Redis Stream 流的深度解析与实现高级消息队列HTTP 消息

相关问答

是否有更好的方法在ASP中实现基于角色的访问。NET框架？防止基于长度的消息帧篡改？基于spring boot,如何在Redis Stream中实现多线程并行消费消息队列？基于FIFO的队列实现？基于右Kan扩展的列表

相关文档

如何实现自己的 jQuery深度学习入门：基于 Python 的理论与实现基于 Node.js 的 HTTPS MITM 中间人代理的原理和实现基于深度学习的推荐系统：综述和新视角jQuery UI 基础教程
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.