XYTipsWindow 2.8 ，一款轻量级Jquery弹窗插件！

最新推荐文章于 2025-09-05 10:03:23 发布

原创最新推荐文章于 2025-09-05 10:03:23 发布 · 9.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #function #框架 #iframe #浏览器

PHP相关资料同时被 2 个专栏收录

45 篇文章

订阅专栏

XYTipsWindow

2 篇文章

订阅专栏

本文介绍了一款轻量级的Jquery弹窗插件XYTipsWindow2.8，提供了弹出文本、信息提示、页面元素、图片、视频、文件和网页等多种功能，并展示了不同参数设置下的弹窗效果。

XYTipsWindow 2.8 ，一款轻量级Jquery弹窗插件！

兼容性不错，基本上每个浏览器都支持，收藏一下！

弹出普通文本信息提示以及位置演示：

$("#ID").click(function(){
	$.XYTipsWindow();//默认
	$.XYTipsWindow({___offsets:"left-top"});//左上角
	$.XYTipsWindow({___offsets:"right-top"});//右上角
	$.XYTipsWindow({___offsets:"left-bottom"});//左下角
	$.XYTipsWindow({___offsets:"right-bottom"});//右下角
	$.XYTipsWindow({___offsets:"left-middle"});//靠左居中
	$.XYTipsWindow({___offsets:"right-middle"});//靠右居中
	$.XYTipsWindow({___offsets:"middle-top"});//居中置顶
	$.XYTipsWindow({___offsets:"middle-bottom"});//居中置底
	$.XYTipsWindow({___offsets:{left:"100px",top:"100px"}});//自定义
});

弹出一个普通的信息提示（可拖动，遮罩层）：

$("#test2").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"text:提示信息内容",
		___width:"300",
		___height:"200",
		___dray:"___boxTitle",
		___showbg:true
	});
});

弹出页面中的某个ID（可拖动，遮罩层）：

$.XYTipsWindow({
	___title:"弹出页面中的某个ID",
	___content:"id:testID",
	___showbg:true,
	___drag:"___boxTitle"
});

我是测试ID里的内容
我换行了...

弹出一张图片（可拖动，遮罩层）：

$("#test4").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"img:图片路径",
		___width:"500",
		___height:"250",
		___drag:"___boxTitle",
		___showbg:true
	});
});

弹出一个视频或FLASH动画（可拖动）：

$("#test4").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"swf:路径",
		___width:"225",
		___height:"185",
		___drag:"___boxTitle"
	});
});

加载一个文件（也可以是.php/.asp?id=4之类的,可拖动，遮罩层）：

$("#test5").click(function(){
	$(this).XYTipsWindow({
		___title:"Hello world",
		___content:"url:get?test.html",
		___width:"400",
		___height:"200",
		___drag:"___boxTitle",
		___showbg:true
	});
});

加载一个网页到框架里（可拖动，遮罩层）：

$("#test6").click(function(){
	$(this).XYTipsWindow({
		___title:"框架应用",
		___content:"iframe:http://leotheme.cn",
		___width:"900",
		___height:"500",
		___drag:"___boxTitle",
		___showbg:true
	});
});