2009-5
25
实现模态框的解决方案在互联网上能找到不少，但是它们大多需要引入诸如Jquery、Mootools、Dojo、YUI等javascript库。如果仅仅是要实现模态框就引入庞大的类库，岂不是得不偿失。这里为大家提供一款用javascript实现的轻量级模态框解决方案TinyBox。
所谓模态框，就是在当前页面弹出一个子窗口，如果该子窗口不关闭的话，不能操作父窗口功能。
去看一下本解决方案的在线示例：浏览在线示例
作者主页（Author Website）：http://www.leigeber.com
TinyBox的功能特色：
- TinyBox是一款独立的的模态框脚本，使用时不需引入其他脚本库。
- TinyBox是一款轻量级模态框脚本，它的压缩版本仅有3.5k
- 弹出的模态框可调用HTML内容，也可通过ajax调用其它页面
- 可用来调用显示图片
- 可控制在一定时间后模态框自动关闭
- 可控制打开模态框时是否启用载入Loading标识
- 可控制模态框大小，也可选择根据模态框内容自适应大小
- 可通过简单的CSS控制模态框样式
- 该脚本在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过
TinyBox的使用方法：
- 第一步当然是要先引入Tinybox脚本文件及样式
- 通过下面语句调用模态框：
TINY.box.show('advanced.html',1,300,150,1,3) - TINY.box.show参数解释：
第一个参数advanced.html，是要调用内容。如果是ajax调用页面，则写该页面的相对路径；如果是调用HTML内容，则传入javascript对象；
第二个参数1，用来标识是否通过ajax调用页面，是为1，否为0；
第三个参数300，用来控制弹出模态框窗口宽度，使用0则为auto自适应；
第四个参数150，用来控制弹出模态框窗口高度，使用0则为auto自适应；
第五个参数1，用来控制是否显示载入Loading标识，1启用，0不启用；
第六个参数3，标识3秒后模态框窗口自动关闭，该参数为可选，不写该参数则为不自动关闭
其它说明：
- 本解决方案来源：来源，有什么问题可在来源主页联系作者，当然也可在本页面留言，大家一起讨论。
- 作者说下个版本会引入新功能，一起期待。
下载示例源码：javascript实现的轻量级模态框解决方案 [下载次数：911]
延伸阅读:
- Tinybox模态框使用扩展一则
- 通过javascript实现table表格排序分页功能
- 简洁易用的html编辑器——TinyEditor
- 实现页面不同位置间平滑滚动的两种解决方案
- 保持新鲜感：网页每次加载不同样式的实现方法
- 国产基于jQuery的优秀XHTML在线编辑器xhEditor
- 功能强大易用的Web视频播放器——Flowplayer（使用方法及演示）
- 教你一招，开辟网站页面的新空间
版权声明：
本站内容受著作权法保护。个人网站、blog转载时请遵循 “署名-非商业用途-保持一致” 的创作共用协议；商业网站或媒体未授权不得复制本站内容。
友情提示：
如对本文有任何疑问，或在示例的使用中遇到问题，或有好的建议，欢迎在下面留言共同学习，有问必答。
楼主试过第一个例子吗，为啥一点就报js错误：拒绝访问
我这边是没有问题的， 你用的是什么浏览器？ 我也测试下。
从你文章里的链接下载完用ie7打开的，点击第一个会报错，后面两个没问题
我在两个使用IE 7 同事的笔记本上测试均没有问题呢。。
如果有兴趣的话，开启IE的调试模式，将报的错误发一下。
[...] 前不久曾发表过一篇介绍Tinybox的文章《通过javascript实现的轻量级模态框解决方案（支持Ajax）》。今天一位朋友就tinybox的使用提出一个问题：如果在侧边栏有很多图片的缩略图，如何能一次性的给它们添加tinybox模态框效果。这样的应用是非常实际的，下面我就这个问题说一下解决方案。 [...]
第一个为啥有问题，后面2个没有问题？
谢谢
真是奇怪，我和同事测得都没有问题…
你那边具体报什么错误，能贴一下么？
nice
博主专注翻译啊
国外的好东西多，技术更新快，不介绍过来可惜了，免得国内人重复制造轮子。翻译只是一种手段
在本地访问第一个会报错，在网址里访问就不会了
是不是29行代码要求必须是http请求的原因？
var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject(’Microsoft.XMLHTTP’);
这算不算需要完善的地方
原来大家说第一个不能运行，是下到本地不能运行啊？我还以为是在线的示例。
如果是在本地的话，需要更改31行代码 ：
if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)} 中的x.status==200改为x.status==0
大致是因为200是服务器响应代码，0是本地响应代码
第六个参数3，标识3秒后模态框窗口自动关闭，该参数为可选，不写该参数则为不自动关闭
不自动关闭，那用什么方法关闭
默认情况下，点击模态框窗口以外区域，也就是遮罩区域，可关闭。
看它在源代码的实现，第14行： m.onclick=TINY.box.hide;
可知，通过调用TINY.box.hide()方法关闭当前窗口，这样就可以添加关闭按钮了。
谢谢你的回复！
想用这个tinybox，有几个问题
1.能不能像THINKBOX一样在iframe内弹出可以全部遮住
2.可否比较灵活的自定义tinycontent的样式
3.如何加上拖拽效果
第一个问题木有看懂，没有用过thinkbox。
后面两个问题要对tinybox做改造了，需要研究一下才成。
可以看一下本博讲的另一款（非）模态框解决方案http://css9.net/flexible-ui-library-jquery-tools-4/。这个api比较丰富，可能扩展容易些。
PS：你的头像怎么出不来，导致这个页面总是在加载。检查一下吧。
en,是thickbox，就是在iframe内的html文件的弹出层能不能覆盖整个页面
呵呵，我是从你的另外一个博客跟过来的
你说的这种情况我还真没想到。抽时间试试。
偶的另一个博客？哪个？
看错了，是从博客园看到你的留言跟过来的
以前很少接触前端和交互，现在要自己做了，在你这里找到一些很有用的东西，虽然现在还不大会用
嗯，常来交流。有问题一定提出来。
第一个点击报错的问题应该是在本地环境不支持ajax的原因；
把第二个参数修改为0，就能看到大约的效果，但不能加载出页面的内容
嗯 改成0可以看到页面内容的。前面评论提到过一次http://css9.net/javascript-lightweight-modal-window/comment-page-1/#comment-621
正在使用这个js效果，发现在IE7下淡出效果持续太长时间了，可以设置吗？另外，我需要弹出一个表单，可是如果用户一不小心点击了外边，弹出层就会关闭，于是辛苦填写表单岂不是白搭，所以，有什么方法可以让他只有点击“关闭”才关闭的方法吗？谢谢。
你说的这两个设置，tinybox没有提供参数接口。我看了一下代码，可以通过更改tinybox.js，解决你说的问题。
第一个淡入淡出时间效果太长：tinybox.js是通过TINY.box.alpha(e,d,a,s)方法实现淡入淡出的，其中第四个参数控制淡入淡出时间。搜索tinybox.js中“TINY.box.alpha”，将第四个参数适当调小即可。
第二个点击遮罩层不关闭的方法：tinybox.js第14行“m.onclick=TINY.box.hide;” 这句实现的是点击遮罩层关闭，删除这句即可。
好像不支持中文啊 = =
我直接在 advanced.html 里添加中文，结果打开后显示为方块 = =
有没有可以解决的方法么？
文件编码的问题，将advanced.html文件字符编码更改为utf-8即可
可是advanced.html不是标准的html哈，里面只有两段哈。这样怎么改呢？要自己添加吗？那如何添加呢？
然后，我自己创建了两个新的advanced.html（使用记事本和Dreamweaver创建的），但结果还是不行哈 = =
advanced.html中的html 是你要弹出模态框里面的html片段，不必是完整的html网页。
也就是你想在模态框里显示什么，就直接写什么。
嗯，这个偶知道了，但是advanced.html里可以支持显示中文，而到了模态框里就不能正常显示中文哈。
这个文件解码问题是哪个部分出错呢？是与模态框的设置有光，还是index.html有关，或者是advanced.html有关呢？该如何修改呢？
你可以尝试把用到的所有文件都改成utf-8编码。
里面添加并在
嗯，解决了
非常感谢您的帮忙哈
有一个问题和版主讨论下~
tinybox在loading时 gif动画图片会抖动~~我看了下
twsize(e,w,wo,wd,h,ho,hd,s) 如果去掉s效果会好些~~
只有IE下有抖动的问题~~
不知道版主有没有什么高见？
它的淡入淡出效果感觉特别生硬，我想请问版主就是，应该更改哪块代码除去淡入淡出效果，或者使其更流畅点
还有就是如何改变蒙版的深浅，我觉得它的蒙版颜色太深 想弄浅点。
同样是tinybox在ajax或者加载图片loading的时候，会抖动，不知道该怎么解决.
你用的是什么浏览器？ 我这边 火狐 和ie 7 ie8下没有明显的抖动。
可以参考一下上面jyang的留言
[...] 前不久曾发表过一篇介绍Tinybox的文章《通过javascript实现的轻量级模态框解决方案（支持Ajax）》。今天一位朋友就tinybox的使用提出一个问题：如果在侧边栏有很多图片的缩略图，如何能一次性的给它们添加tinybox模态框效果。这样的应用是非常实际的，下面我就这个问题说一下解决方案。 [...]
不知道博主还在不在，想问问，IE下，淡出时间太长的问题怎么解决？用以上方法不行。
另外就是如何添加关闭按钮~~
呵，再次使用这个js ，又逛到这里来了。
对于IE 下遮罩层淡入淡出持续时间长的问题，TINY.box.alpha 我测试了确实无助解决。
另外，呵，弹出层里边的元素，好像不能通过绑定事件诶。比如，弹出层是一个表单，外面写的 验证代码就不起作用，好像只能在元素里边用 onclick 来绑定函数 _—— 恩，没学过js ，说的不是很专业。比如：
在一般页面上的链接，可以给链接加一个 class=“tingBox”, 然后，通过 jquery 的选择器，$(’.tinyBox’).click(function(){TINY.box.show($(this).attr(’href’),1,0,0,1); return false;}) 这样来启用tinybox弹出层，——同时也能保证没加载js ，这个链接也能使用。
但是问题是，在弹出层里边，这个click 事件就不起作用了。——当然，实际上我们要做的还不止这些，比如给表单绑定一个AJAX提交，或者 js 验证之类的，难道只能在相应的地方写 onclick…. 或者 onblur … 吗？ 期待…
我数据库里的值已改变，第二次弹出窗口时，为什么没有显示改变的数据而是原来的数据了？
I totally love this article. I think you could write some other things to make your blog more complete.For example： ed hardy.vibram five fingers.p90x workout schedule. mbt shoes. hardy caps. vibram fivefingers kso trek. mbt chapa dawn shoes.
ghd straightener
ugg ugg boots
replica louis vuitton handbags
edhardyI thought that many people can like.