文章归档友情连接照片地图

js弹出(可移动)层/窗口源码

分类:前端技术  作者:rming  时间:2011-03-12

最近想再学习一下前台代码的东西,于是乎给力的练习css,上一周的时候写了一个利用一张很有创意的图片编写的一个简单页面,这周想做个漂亮一点的ui的小东西,今天突然很对网页上弹出的窗口感兴趣,特别是那种半透明的窗口,我觉得这个一般是用jquery和js做的吧,于是乎和往常一样去谷歌查找了一下,果然在kekaku的博客上找到了一篇文章。自己根据自己搜索的结果在这里总结一下吧,js在前台打造弹出div的效果。

第一种效果:
弹出效果很棒,可以加载到连接上,不过在弹出层上写div还没尝试,据@lds同学介绍,估计没什么问题。
代码如下:





-






由于不能跨域,读取的文件须在同一域名下,如果出现错误,
原因是在目标文件上的,本例代码本身没有错误
如果目标文件数据过大,花费的时间也相对较长,外部文件需用utf-8编码,否则中文可能显示为乱码

forum-1-1.html 500*300

faq.php 500*200

1.html 200*500

2.html 500*500

双击关闭层

然后下面是第二种效果:
下面的这种效果还是很令人满意的,可以自由的编写div,可以自由的设置弹出内容,不过样式可以自己修改一下,这个十分的有必要啊,哈哈。
代码如下:





JS弹出层





点我就出来

网上还有几种显示的方法,不过js的写法大同小异,就总结这两个吧,感觉足以受用。

部分代码来源:http://www.kekaku.com/archives/257



提交评论