今天要写的是关于弹出窗口的,各位肯定看到这样的效果:点击登录的时候,弹出一个背景为黑色的窗口,其实要说做这样的效果也不难,但是对于像我这样js没认真学,又要实现效果的朋友来说,是有点难的,今天弄了一天,这个效果,勉强是实现了这样的效果,但是不是很完美,当然了,我是不可能现在自己写出来的,只能用插件了,在网上找 了很多,问别人也问了很久,弄出来两个,我觉得还是挺好用的,只是有些效果还不能直接实现出来,好了现在来看看吧:
在看之前我先说一下我要做的效果:我的页面中有许多从数据库查询出来的数据,每个数据后面都有一个查看按钮,点击查看按钮,通过js的function将值传给servlet,servlet再从数据库中查出内容显示出来,显示弹出窗口中,我要的效果就是这样。
第一个插件:TipsWindown
使用方法:
一个基于jQuery的弹出层。支持拖拽,支持内容为文字,图片,URL等!至于兼容性。在IE6下,弹出对像无法绝对固定。其他应该没啥大问题;
最新更新:(2010-08-12):修正IE6下不能遮住下拉菜单的BUG,增加拖动时半透明效果。
首先当然是导入它的cs文件和css文件了,分别为tipswindows.js和tinybox.css
之后导入:
就可以直接用了
tipsWindown("提示","text:提示信息内容","250","150","true","","true","msg")
tipsWindown("标题","id:testID","300","200","true","","true","id")
tipsWindown("图片","img:图片路径","250","150","true","","true","img")
tipsWindown("标题","url:get?test.html","250","150","true","","true","text");
tipsWindown("标题","iframe:http://www.nowamagic.net","900","580","true","","true","leotheme");
tipsWindown("提示","text:提示信息内容","250","150","false","","false","msg")
tipsWindown("提示","text:提示信息内容","250","150","false","3000","true","msg")
顺序 | 参数 | 功能 | 备注 | |
---|---|---|---|---|
1 | title | 弹出层的标题 | 必填,纯文本 | |
2 | content | 弹出层的内容 | text | 文本内容 |
id | 页面里某id的子标签 | |||
img | 图片 | |||
url | get或post某一页面里的html,该页面要求只包含body的子标签 | |||
iframe | 目标地址在框架显示 | |||
3 | width | 弹出层的宽 | 必填,比如“200”。(不需要带px) | |
4 | height | 弹出层的高 | 同 width | |
5 | drag | 是否可拖动 | 必填,可选参数(true,false) | |
6 | time | 自动消失时间 | 可不填,默认不自动关闭;参数可为空("") | |
7 | showbg | 是否显示遮罩层 | 可不填,默认不显示(此项如填了,它前面的time也必须要填) | |
8 | cssName | 弹出层附加样式名 | 可不填 |
像这种弹出透明背景层效果很常见了,除部分区域可以操作外其他区域不能操作,目前有提供插件,完全可以实现此种效果。
查看本页源代码可获取所有所需的代码。
这里不能显示,我说下我使用的方法:
这是查看链接
function viewComments(a){
tipsWindown("标题","url:get?servlet/ViewMessageServlet?"+a,"250","150","true","","true","text");
}
就这样就行了,这个插件我觉得是相当强大的,可惜我这个是通过servlet才显示的页面,不是直接显示页面,所以有点问题,在IE和360里面弹出以后背景是黑色的,在FireFox中可以正常使用,这是唯一遗憾的地方,其他方法相当的好用
注意使用的时候文件目录是这样的
--css
--tipswindown.css
--js
--jquery.js
--tipswindown.js
第二个插件:TinyBox
我这个项目最后用的就是这个,但是很遗憾还是有些满意的地方,下面再讲:
前面可以通过 ThickBox 这个 jQuery 插件实现弹出框效果,但是使用 ThickBox 需要事先导入 jQuery JS 文件,所以如果仅仅需要弹出框效果的话,有点过于臃肿,所以这个时候我推荐你使用,TinyBox 这个轻量级的 JavaScript 脚本。
TinyBox 是一个轻量级并且独立的模态窗口脚本,该脚本只有 3.5KB,不包括任何内置的幻灯片功能,但是可以显示任何的 AJAX 和 HTML 内容,还支持图片,并且能够自动隐藏,可以通过简单的 CSS 来定制样式的效果。TinyBox 已经在 Firefox 2/3, IE 6/7/8, Opera, Safari 和 Chrome 中测试过。使用 TinyBox 非常简单,通过一下代码即可:
1
|
TINY.
box .
show
(
'advanced.html'
,
1
,
300
,
150
,
1
,
3
)
|
它一共有6个参数,第一个是要显示的 AJAX 或 HTML 内容。第二个是设置是否为 AJAX。第三个是宽度,0 为自动。第四个是高度,0 为自动。第五个是是否设置隐藏,第六个则是设置是否自动隐藏的时间。
http://www.5ga.cn/blog/archives/2009/06/1679/
这是网上的一个介绍,看起来相当的简单,用起来也相当的简单:
function viewComments(a){
TINY.box.show("servlet/ViewMessageServlet?id="+a,1,300,150,1,3);
}
这是我最后用的,但是有一个问题,就是没有关闭按钮,再一位网友的指导了,在弹出窗口的里面加了关闭链接:
不过很遗憾,在IE中,这个关闭链接有时候显示不出来,写这的时候,我还不知道怎么解决,不过项目时间有限,只能将就了,以后有时间再来研究一下。
注意使用TinyBox的时候文件分布是这样的:
---css
--images
---preload.gif
---rhino.jpg
--js
--tinybox.js
网上插件很多,有时间我决定继续找,找到一个我认为完美的插件
第三个插件:Thickbox(重磅推出)
这是我发现的最好的一个插件了,网上说也是最常用,用到这个以后,上面说到的两个都解决了,而且貌似Thickbox是jquery官网里的,这个我觉得实在太好用了,好了还是说说怎么用了:
目录结构:
--css
--thickbox.css
--images
--loadingAnimation.gif
--js
jquery.js
thickbox-compressed.js(压缩版)
在这里要注意一下,因为弹出窗口弹出来以后,如果内容还没显示,那么会有一个加载过程,这个时候就有一个动态的加载图片这里就是
loadingAnimation.gif,这个图片是可以换的,这个实现是通过修改js文件来实现了,js文件中有这样的一句:
var tb_pathToImage = "style/images/loadingAnimation.gif";
这里要注意了,这个路径要写对,这个路径不是相对于js文件的,而是相对于整个工程的,所以要写WebRoot下你的gif图片的完整路径
我的是这样的:
--WebRoot
---style
--css
--images
---loadingAnimation.gif
--js
所以这个路径要写成像我上面那样
对于我的那个效果很简单:
一句话搞定,注意这个class="thickbox"是一定要写的,网上有很多关于这个的资料,这里就不详细讲了