js特效(弹出窗口)--整死我了(3)

最新推荐文章于 2023-06-27 15:48:24 发布

tianhandigeng1498

最新推荐文章于 2023-06-27 15:48:24 发布

阅读量1.1w

点赞数

分类专栏： js 文章标签： javascript servlet jquery stylesheet function firefox

本文链接：https://blog.csdn.net/tianhandigeng1498/article/details/6048927

版权

js 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天要写的是关于弹出窗口的，各位肯定看到这样的效果：点击登录的时候，弹出一个背景为黑色的窗口，其实要说做这样的效果也不难，但是对于像我这样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")
弹出页面中的某个ID的html：

tipsWindown("标题","id:testID","300","200","true","","true","id")
弹出图片：

tipsWindown("图片","img:图片路径","250","150","true","","true","img")
get加载一个.html文件（也可以是.php/.asp?id=4之类的）：

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);
}

这是我最后用的，但是有一个问题，就是没有关闭按钮，再一位网友的指导了，在弹出窗口的里面加了关闭链接：

<body>
    <div id="content">
         ${comment.content}
    </div>
    <div>
         <a href="javascript:TINY.box.hide()">关闭</a>
    </div>
</body>

不过很遗憾，在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"是一定要写的,网上有很多关于这个的资料,这里就不详细讲了

tianhandigeng1498

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js特效(弹出窗口)--整死我了(3)

今天要写的是关于弹出窗口的，各位肯定看到这样的效果：点击登录的时候，弹出一个背景为黑色的窗口，其实要说做这样的效果也不难，但是对于像我这样js没认真学，又要实现效果的朋友来说，是有点难的，今天弄了一天，这个效果，勉强是实现了这样的效果，但是不是很完美，当然了，我是不可能现在自己写出来的，只能用插件了，在网上找了很多，问别人也问了很久，弄出来两个，我觉得还是挺好用的，只是有些效果还不能直接实现出来，好了现在来看看吧：在看之前我先说一下我要做的效果：我的页面中有许多从数据库查询出来的数据，
复制链接

扫一扫