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 }); });
- 官方网址:http://leotheme.cn/wp-content/uploads/Example/js/tipswindow/index.html