弹出层之3：JQuery.tipswindow

tipswindow是一个很一般的JQuery弹出层插件，但使用简单，有相对漂亮的外观，代码比较通俗。下面介绍使用方法：

1、首先引入该插件相关文件，分别是样式，JQuery库，该插件

<linkhref="tipswindown.css"rel="stylesheet"type="text/css"/>
<scriptsrc="../Contents/JS/jquery-1.5.js"type="text/javascript"></script>
<scriptsrc="tipswindown.js"type="text/javascript"></script>

2、修改tipswindow.css文件中图片的路径，默认与css文件在同一个目录下。
3、编写代码，如在图片上设置单击事件后放大显示图片：

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<linkhref="tipswindown.css"rel="stylesheet"type="text/css"/>
<scriptsrc="../Contents/JS/jquery-1.5.js"type="text/javascript"></script>
<scriptsrc="tipswindown.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$("#imgTest").click(function(){
tipsWindown("标题：风景","img:"+this.src,"640","480","true","","true","img");
});
/*
functiontipsWindown(title,content,width,height,drag,time,showbg,cssName)
title:窗口标题
content:内容(可选内容为){text|id|img|url|iframe}
width:内容宽度
height:内容高度
drag:是否可以拖动(ture为是,false为否)
time:自动关闭等待的时间，为空是则不自动关闭
showbg:[可选参数]设置是否显示遮罩层(0为不显示,1为显示)
cssName:[可选参数]附加class名称
*/
});
</script>
</head>
<body>
<imgsrc="../Contents/Images/wallpager/Autumn_A_1.jpg"width="400"height="300"id="imgTest"/>
</body>
</html>

其它用法网友总结如下：
1.弹出文本信息提示：
tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")

2.弹出页面中的某个ID的html：
tipsWindown("标题","id:testID","300","200","true","","true","id")

3.弹出图片：
tipsWindown("图片","img:图片路径","250","150","true","","true","img")

4.get加载一个.html文件（也可以是.php/.asp?id=4之类的）：
tipsWindown("标题","url:get?test.html","250","150","true","","true","text");

5.加载一个页面到框架显示：
tipsWindown("标题","iframe:http://leotheme.cn","900","580","true","","true","leotheme");

6.弹出一个不能拖动且没有遮罩背景的文本信息层：
tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")

7.弹出一个不能拖动，三秒钟自动关闭的层：
tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")

弹出层之3：JQuery.tipswindow

相关推荐