`
TiFa.L.Hart
  • 浏览: 15932 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-2.0.3.min.js" type="text/javascript"></script>

<script>

//Figure out what browser is being used (Fixed the issue jquery version after 1.9)
$.browser = {
mozilla : /firefox/.test(navigator.userAgent.toLowerCase()),
webkit : /webkit/.test(navigator.userAgent.toLowerCase()),
opera : /opera/.test(navigator.userAgent.toLowerCase()),
msie : /msie/.test(navigator.userAgent.toLowerCase()),
};
</script>


<script>
/**
 * 自定义插件：实现在浏览器中定位窗口的位置 这里根据用户传过来的参数进行设置窗口的位置(上下左右4个角落以及中间)
 *
 * @param height
 *            窗体高度，如400(建议不带单位,默认为px) 
 * @param width
 *            窗体宽度，如600(建议不带单位,默认为px)
 * @param title
 *            窗体顶端的标题
 * @param message
 *            窗体显示的内容
 * @param left
 *            表示窗口水平位置-->可选值："center"、"left"、"right"、具体的数值,如：200
 * @param top
 *            表示窗口垂直位置-->可选值："center"、"top"、"bottom"、具体的数值,如：300
 * @param type
 *            表示类型
 *            可选值："default"、"rollup"。default--->表示默认的,没有动画。rollup--->表示在右下角滑上来(像QQ消息提示框一样)
 *
 */
$.fn.popUpWin = function(args) {
	var currentWin = this; // 将当前对象设置成currentWin，以方便使用
	var windowObj = $(window); // 转化window为JQuery对象

	var winWidth = 600; //windos's width
	var winWidthUnit = '600px'; //width with unit
	var winHeight = 400; //windows's height
	var winHeightUnit = '400px'; //width with unit
	var browserWidth = windowObj.width(); // 浏览器的宽
	var browserHeight = windowObj.height(); // 浏览器的高
	var scrollLeft = windowObj.scrollLeft(); // 获取滚动条的左边距(滚动条里最左端的差距)
	var scrollTop = windowObj.scrollTop(); // 获取滚动条的上边距
	var winLeft; // 窗口的左边距
	var winTop; // 窗口的上边距
	
	var positionLeft;
	var positionTop;
	var title = 'Message Dialog';
	var message = 'No message show up!';
	var type; //窗口类型
	
	//check if it is a number
	function isNumber(tester){
		var re = /\D+/;
		return !re.test(tester);
	}
	//get number from strig such as 600px will return 600
	function getNumber(str) {
		var re = /^\d+/;
		return str.match(re);
	}
	
	function getUnion(str) {
		var re = /\D+/;
		return str.match(re);
	}
	
	
	// init params
	if (args && args instanceof Object) {
		
		if(args.height && args.height!=''){
			if(isNumber(args.height)){
				winWidth = args.height;
				winWidthUnit = args.height + 'px';
			} else {
				winWidth = getNumber(args.height);
				winWidthUnit = args.height;
			}
		}
		
		if(args.width && args.width!=''){
			if(isNumber(args.width)){
				winWidth = args.width;
				winWidthUnit = args.width + 'px';
			} else {
				winWidth = getNumber(args.width);
				winWidthUnit = args.width;
			}
		}
		
		if(args.title && args.title!='') {
			title = args.title;
		}
		if(args.message && args.message!=''){
			message = args.message;
		}
		
		if(args.type && args.type!='') {
			type = args.type;
		}
		
		if(args.left && args.left!='') {
			positionLeft = args.left;
		}
		
		if(args.left && args.top!='') {
			positionTop = args.top;
		}
	}
	
	
	/*
	* init component
	*/
	function initComponent(){
		
		var appendStr = "<div class='pop_up_title'><span class='pop_up_cls'><input type='button' value='Close'/></span><span class='pop_up_txt'>" 
		+ title
		+ "</span></div><hr color='#0099FF'/><div class='pop_up_content'><span class='pop_up_content_txt' style='" 
		+ (winHeight-50)
		+ getUnion(winHeightUnit) + ";'>"
		+ message
		+ "</span></div>";

		currentWin.addClass("pop_up_window");
		
		currentWin.css( {
				"width" : winWidthUnit,
				"height" : winHeightUnit
		});
			
		currentWin.append(appendStr);

	}
	// init component
	initComponent();

	// 处理水平位置的参数
	function calLeft(positionLeft, scrollLeft, browserWidth, winWidth) {
		if (positionLeft && typeof positionLeft == "string") { // 判断参数为字符串
			if (positionLeft == "center") { // left参数为center，则水平居中
				winLeft = (browserWidth - winWidth) / 2 + scrollLeft;
			} else if (positionLeft == "left") { // left参数为left，则水平居左
				winLeft = scrollLeft;
			} else if (positionLeft == "right") { // left参数为right，则水平居右
				winLeft = scrollLeft + browserWidth - winWidth;
			} else { // 用户输入了其他字符串，则改为默认居中
				winLeft = (browserWidth - winWidth) / 2 + scrollLeft - 30;
			}
		} else if (positionLeft && typeof positionLeft == "number") { // 判断参数为数值,则根据数值直接设置
			winLeft = positionLeft;
		} else {  //其他情况,默认居中。如：没有输入该参数或非法字符
			winLeft = (browserWidth - winWidth) / 2 + scrollLeft;
			positionLeft = "cneter";
		}
	}

	// 处理垂直位置的参数
	function calTop(positionTop, scrollTop, browserHeight, winHeight) {
		if (positionTop && typeof positionTop == "string") {
			if (positionTop == "top") {
				winTop = scrollTop;
			} else if (positionTop == "center") {
				winTop = (browserHeight - winHeight) / 2 + scrollTop;
			} else if (positionTop == "bottom") {
				winTop = scrollTop + browserHeight - winHeight;
			} else {
				winTop = (browserHeight - winHeight) / 2 + scrollTop;
			}
		} else if (positionTop && typeof positionTop == "number") { // 判断参数为数值,则根据数值直接设置
			winTop = positionTop;
		} else {
			winTop = (browserHeight - winHeight) / 2 + scrollTop;
			positionTop = "center";
		}
	}
	
	// *******这里很重要，将传过来的参数缓存在data.positionLeft中，这样做是为了在后面滚动条滚动或浏览器大小改变时使用，这里有点像java中的hashMap
	currentWin.data("positionLeft", positionLeft); // 缓存数据
	currentWin.data("positionTop", positionTop); // 缓存数据

	// 移动窗口,此方法仅供滚动条滚动以及窗口大小时使用，不适合初始化(就是在加载页面时，调用了该插件)时使用，因为一开始不存在currentWin.data("positionLeft")和currentWin.data("positionTop")的值
	function moveWin() {
		// 重新获取一些值并调用响应的内部函数进行设置
		var browserWidth = windowObj.width(); // 浏览器的宽
		var browserHeight = windowObj.height(); // 浏览器的高
		var scrollLeft = windowObj.scrollLeft(); // 获取滚动条的左边距(滚动条里最左端的差距)
		var scrollTop = windowObj.scrollTop(); // 获取滚动条的上边距

		// 调用方法重新计算左边距和上边距
		calLeft(currentWin.data("positionLeft"), scrollLeft, browserWidth,
				winWidth);
		calTop(currentWin.data("positionTop"), scrollTop, browserHeight,
				winHeight);

		// 设置窗口位置
		currentWin.animate( {
			"left" : winLeft,
			"top" : winTop
		}, 200); // 注意：currentWin在css定义中一定要注明position:absolute;
	}
	
	
	//窗口类型
	if(type && type == "rollup"){  //这里实现像QQ消息框效果,在右下角滑上来，并慢慢淡出
			//如果窗口可见，将其设置成隐藏
			if(currentWin.is(":visible")){
				currentWin.hide();
			}
			calLeft(positionLeft, scrollLeft, browserWidth, winWidth);
			calTop(positionTop, scrollTop, browserHeight, winHeight);
			var left = winLeft;
			if($.browser.mozilla){  //修正firefox左边距
				left =  winLeft-10;
			}
			currentWin.css( {
				"left" : left,
				"top" : winTop + winHeight
			});
			
			currentWin.show(500).animate( {
				"top" : winTop
			}, 500)
			var fadeOutTimeOut;
			clearTimeout(fadeOutTimeOut); // 先清除所有延时，以免重复叠加
			fadeOutTimeOut = setTimeout(function() {
				currentWin.fadeOut(25000).dequeue();//15秒淡出   《dequeue()：去除动画队列中第一个动画，但该动画仍会继续执行，这样能保证后面的动画不需要等到第一个动画执行完才执行,这样可以防止在滚动条滚动时能在淡出的同时也能移动位置》
			}, 3000); // 3秒后开始淡出
			
			//鼠标悬停在窗口上,取消隐藏
			currentWin.mouseover(function(){
				if(!currentWin.is(":visible")){ //若窗口本身为不可见时不执行后面两句语句
					return;
				}
				currentWin.stop(true,true);
				currentWin.fadeIn(0);
			});
			
			//鼠标移开，3秒后再次隐藏
			currentWin.mouseout(function(){
				if(!currentWin.is(":visible")){
					return;
				}
				clearTimeout(fadeOutTimeOut); // 先清除所有延时，以免重复叠加
				fadeOutTimeOut = setTimeout(function() {
					currentWin.fadeOut(25000).dequeue();
				}, 3000);
			});
			
			
			
			
			
		} else {  //普通情况
			calLeft(positionLeft, scrollLeft, browserWidth, winWidth);
			calTop(positionTop, scrollTop, browserHeight, winHeight);
			
			currentWin.css( {
				"left" : winLeft,
				"top" : winTop
			});
			
			currentWin.show("slow"); //显示窗口
		}



	// 为当前窗口注册滚动条滚动事件，在滚动条滚动时能够动态改变窗口的位置
	windowObj.scroll(function() {
		if (!currentWin.is(":visible")) {
			return;
		}
		var scrollTimeOut; // 延时处理,由于拉动滚动条时不断改变窗口位置会导致浏览器会一闪一闪,所以通过延时修改
		clearTimeout(scrollTimeOut); // 先清除所有延时，以免重复叠加
		scrollTimeOut = setTimeout(function() {
			moveWin();
		}, 300); // 延时300毫秒
		});

	// 为当前窗口注册浏览器大小改变事件
	windowObj.resize(function() {
		if (!currentWin.is(":visible")) { // 判断若当前窗口为不可见则不进行该事件的处理
				return;
			}
			moveWin();
		});


	// 注册关闭窗口事件
	$(currentWin).find("span[class='pop_up_cls']").click(function() {
		$(currentWin).fadeOut(0);
	});
	
	return currentWin;
}
</script>


<script>
function load(){
	$("#test").popUpWin({
		title: "testing",
		message: "testing message!",
		width:'600px',
		height: '400px',
		left:'center',
		top:'center'
	});
}
</script>




<style>
/*整个窗体的样式*/
.pop_up_window{
	/*background-color:#D0DEF0;*/
	/*width:600px;
	height:400px;*/
	border:5px solid #B3D9FF;
	margin:0px;
	display:none;
	position: absolute;
	z-index:999;
}

/*窗体内容区的样式*/
.pop_up_content{
	background-color:#FFF;
	width:100%;
	height:350px;

/*	position:relative;*/
}

/*窗体标题栏的样式*/
.pop_up_title{
	marging:0;
	padding:0;
	border:0;
	width:100%;
	height:25px;
	background:#FFF;
	font-size:14px;
	font-weight:bold;

}
/*窗体标题右侧图片的样式*/
.pop_up_title .pop_up_cls{
	padding:0;
	margin-top:3px;
	width:65px;
	height:25px;
	overflow:hidden;
	display:block;  /*一定要设置成block不然不会显示*/
	float:right;

}
/*窗体标题文字的样式*/
.pop_up_title .pop_up_txt{
	display:block;
	height:25px;
	line-height:25px;
	margin-left:5px;
}

/*内容区文本（主体文本）*/
.pop_up_content_txt{
	marging:0;
	padding:0 5px;
	display:block;
	/*height:350px;*/
	background:#CBE7FC;
	overflow:auto; /*这里设置的auto是为了当要显示的内容过多时，会自动出现滚动条*/

}


</style>
</head>

<body onload="load()">

<div id="test">

</div>
 
</body>
</html>
分享到：
nXn矩阵转圈圈
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    17、Jquery支持自定义弹出窗口插件

    17、Jquery支持自定义弹出窗口插件

    jQuery-plugin-layer弹出层插件

    与同类弹出层组件相比，layer的优势明显，她尽可能地在以更少的代码展现出更强健的功能。layer格外注重性能的提升，采用面向对象的思想实现，在多层模式的回调处理中，具备其它多数层组件所没有的“独立不冲突”（已...

    jQuery自定义下拉框选择菜单 支持右键弹出菜单

    之前我们分享过几款简单的jQuery右键菜单插件，比如超实用jQuery右键菜单 可自定义菜单弹出区域和基于Bootstrap外观的JavaScript右键菜单插件，都比较实用。这次我们要分享一款基于jQuery的自定义下拉框选择菜单，这...

    jQuery自定义图片标注插件.zip

    jQuery下拉框菜单多选插件是一款点击弹出图片自定义选择区域编辑内容标注代码。

    自制JQuery弹出层插件 PopupDiv-v1.0

    JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至：maxcoold@126.com --------------------------------------------- 功能说明： 本插件基于jquery 1.31下编写，请尽量在...

    jQuery自定义弹窗功能插件

    jQuery自定义弹窗功能插件是一款jQuery基于animate css动画库，实现多种弹窗方式，可自定义对应弹出框代码。

    jQuery插件ImageFlyout弹出图片实现javascript放大图片功能

    使用jQuery插件jQuery Image Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。 四，用户自定义设置 结合jQuery插件Easing Plugin，可增强javascript图片放大和缩小过程中图片显示的效果。 ...

    时间日期插件 datePicker 可以自定义样式和效果

    jquery.datePicker日历控件应用text文本框弹出日历表与默认显示日历表 jquery.datePicker日历控件应用input:text文本框弹出日历表选择日期时间，设置默认显示日历表展示。jquery日历控件下载。

    jQuery的弹出警告对话框美化插件

    基于jQuery的弹出警告对话框美化插件(警告，确认和提示) 这个Jquery插件的目的是替代JavaScript的标准函数alert&#40;&#41;，confirm（），和 prompt（）。这个插件有 如下这些特点： 1：这个插件可以使你可以...

    jQuery从不同方向自定义弹出层代码

    jQuery PopupLayer是一款可以方便的从不同的方向弹出自定义的弹层jQuery插件。

    jQuery权威指南-源代码

    7.9　自定义jQuery插件/224 7.9.1　插件的种类/225 7.9.2　插件开发要点/225 7.9.3　开发插件示例/226 7.10　综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求分析/232 7.10.2　效果界面/233 7.10...

    js插件-弹出层-选择框-输入框

    这是一款自定义的js插件，可以直接运行，包括各种插件，有无限弹出层，选择框弹出，日期弹出，汉字拼音转化规范等，代码清晰规范，使用场景无任何限制，功能强大，兼容性好，源码适合新手学习

    自定义jquery弹出层插件1.0

    本资源为个人开发的基于jquery的弹出层插件，可扩展。不懂开发插件的朋友也可以以此为参考，教程：https://blog.csdn.net/A13432421434/article/details/103249792

    超赞的Jquery弹出框插件

    JQuery弹出框插件，支持ie6+，多种提示样式，支持自定义样式

    jQuery弹出层插件LayerModel.zip

    jQuery弹出层插件LayerModel是一款支持多种自定义效果的jQuery拖动弹出层特效。

    dialog/popup弹出层,TIPS提示窗口jQuery插件.rar

    jQuery 通用dialog/popup弹出层，提示窗口插件，包括有弹出自定义的帮助窗口(根据位置自动判断在底部或头部弹出)、显示和隐藏Loading信息、显示自定义Loading信息、在指定容器内显示Loading信息、显示和隐藏Tip信息...

    jQuery点击弹出信息提示框插件.zip

    有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！

    超实用jQuery右键菜单 可自定义菜单弹出区域

    关于右键菜单，我们介绍得并不多，目前只有介绍过一款jQuery Bootstrap右键菜单 带点击菜单...今天要继续为大家分享一款高大上的jQuery右键菜单，这款右键菜单可以让使用者自定义菜单弹出的区域，因此非常灵活和实用。

    jQuery自定义鼠标右键弹出菜单代码.zip

    有兴趣刚需的可以自己下载，非常使用的jquery代码，可以完美运行，有能力的还可以二次修改！

    jQuery弹出层插件

    jQuery弹出层插件 登陆对话框/弹出自定义层/样式自定义/已封装好

Magicbox
Global site tag (gtag.js) - Google Analytics