- 浏览: 588286 次
文章分类
- 全部博客 (411)
- 常用工具 (21)
- 喜好 (14)
- 英语 (3)
- java (51)
- ext (4)
- css (44)
- php (34)
- window (7)
- jquery (21)
- js (31)
- struts (4)
- tomcat (1)
- struts2 (11)
- 网络 (4)
- c# (7)
- linux (27)
- oracle (15)
- tag标签 (5)
- 生成静态页面 (6)
- sql (12)
- hibernate (13)
- DesignPattern (3)
- spring (2)
- flex (17)
- excel应用 (1)
- 报表 (2)
- 业界 (2)
- 数据建模 (1)
- 平板 (1)
- ppt (1)
- rich (1)
最新评论
-
youngdze:
受教了,谢谢!
十步解决php utf-8编码 -
DiLiya:
感谢你的讲解;帮了大忙了!
解决-innerHTML无法在TBODY中使用 -
eppen:
强的没话说。帮了大忙。感谢goby2008 ,感谢google ...
解决-innerHTML无法在TBODY中使用 -
cxs4808:
rr
flex 设计模式 -
liuxingvsyou:
3个jQuery弹出窗口插件
某人想要在点击链接的时候,弹出一个遮罩层。
本来想直接使用lightbox来实现,但是该效果只能调用一张图片,而不能调用一个html,无奈自己写了一份。大家可以点击这里查看演示效果
实现方法
1.添加如下javascript:
function showlightbox(ShowUrl) { document.getElementById('lightbox-content').style.display='block'; document.getElementById('lightbox-bg').style.display='block'; if(ShowUrl!='') { document.getElementById('lightbox-iframe').src=ShowUrl; } } function closelightbox() { document.getElementById('lightbox-content').style.display='none'; document.getElementById('lightbox-bg').style.display='none'; document.getElementById('lightbox-iframe').src='about:blank'; }
2.在页面内添加一个iframe层,并指定调用链接
<a href="javascript:void(0)" onclick="showlightbox('ranqi.html')">open lightbox from inside an iframe</a> <!--lightbox--> <div id="lightbox-bg"></div> <div id="lightbox-content"> <iframe id="lightbox-iframe" width="100%" frameborder="0" scrolling="no" src="about:blank" height="100%" ></iframe> <p><a href="javascript:void(0)" onclick="closelightbox()"><img src="images/closelabel.gif" border="0"/></a></p> </div>
3.写点样式
#lightbox-content{position:absolute;height:370px;width:470px;margin:-250px 0px 0px -250px;top: 50%;left: 50%;text-align: right;background-color: #FFF;border: 1px solid #000;display:none;z-index:100;overflow:hidden;padding:10px 10px 40px 10px;} #lightbox-content p{ margin-top:8px;} #lightbox-bg{position:absolute;top:0;left:0;z-index: 90;background:#000;display:none;width:100%;height:100%;_height:2000px;filter:alpha(opacity=70);-moz-opacity:0.6;opacity:0.6;}
发表评论
-
JQuery限制复选框checkbox可选中个数
2012-12-16 16:33 1423<script type="text/j ... -
IE和Firefox兼容的iframe刷新
2010-11-20 11:04 1342parent.document.getElementById( ... -
Firefox和IE之间7个JavaScript的差异
2010-08-12 15:59 669尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
JS实用代码
2010-08-12 15:50 1085事件源对象 event.srcElement.tagName ... -
jQuery.inArray注意事项
2010-08-12 14:25 1405有这么一段程序: <script language=& ... -
CKEditor配置使用
2010-07-31 13:50 2499ckeditor 的官方网站是 http://ckeditor ... -
通过js读取或设置 FCKeditor中的值 js操作fckeditor
2010-07-30 00:26 1541FCKeditor确实挺好用,但却缺乏一个详细的开发文档,以致 ... -
关于用CSS区分Firefox、IE6、IE7
2010-07-16 15:44 764<html> <head> ... -
js 动态创建select 并赋予onchange事件
2010-06-30 17:20 2778function createSelect(iid,pid,n ... -
javascript对话框(弹出层)组件artDialog
2010-05-25 08:10 801http://www.planeart.cn/downs/ar ... -
用JavaScript检查文件是否存在
2010-05-13 15:11 1128function checkURL(URL) { ... -
JavaScript打印
2010-04-07 15:41 10721.JavaScript打印 <input id=&q ... -
JavaScript, AJAX树形控件大全(all kinds of TreeView Controls by JavaScript, AJAX)
2010-03-22 17:09 11771、dTree2、Treeview JavaScript3、Y ... -
javascript获取ul中li的个数
2010-03-04 13:06 2948有这样一段代码: <ul id="mycar ... -
location.hash实现跨域iframe自适应
2010-03-02 12:57 1397页面域关系: 主页面a.html所属域A:www.taoba ... -
15个基于Web的HTML编辑器
2009-09-11 23:26 693http://paranimage.com/15-web-ba ... -
父页面里两个iframe之间互相访问
2009-09-08 23:42 1953转载:http://hi.baidu.com/xeelytec ... -
JS压缩处理
2009-09-08 14:03 828试用几个工具,但是对语法要求比较高,有些js没法通过语法,固找 ... -
常用的js正则表达式
2009-07-24 14:10 975把项目中最近用到的一些正则表达式总结一下。 1.验证身份证号 ... -
模仿abcnews.com制作新闻(图片展示)
2009-06-23 22:07 1108<!DOCTYPE html PUBLIC " ...
相关推荐
html5 LightBox插件手机端图片幻灯片代码
教你如何使用lightbox,另外还附加了六个小例子。
html5手机触屏LightBox幻灯片切换代码
lightbox非常有个性的一东东,用纯Javascript写成,实现略带动感的图片缩略功能,现在好像升级到了2.0了,动感更强!个人感觉还不错!赶快试用一下吧,怎么使用呢!只要打开strat.htm看看就全会了,超酷噢!
样式最全的 lightbox 样式最全的 lightbox
相册上下翻页的特效js ...1、Lightbox v2.0 使用 Prototype 框架和 Scriptaculous 效果库. 你将需要外调这三个 Javascript 文件在你的 header. <script type="text/javascript" src="js/prototype.js"></script> ...
源码html lightbox效果, 里面包含了大量的案例源码
Lightbox v2.04代码及使用方法
jquery-lightboxjquery-lightboxjquery-lightboxjquery-lightboxjquery-lightboxjquery-lightbox
ekko-lightbox.js是一款基于Bootstrap3的jQuery lightBox图片画廊插件。该lightBox插件基于Bootstrap的模态窗口插件来制作,可以显示图片,HTML内容,视频等,也可以远程加载内容。
lightbox代码 lightbox特效<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html <head> <meta http-equiv="Content-Type" content="text/html; ...
Lightbox 2插件介绍: Lightbox 2 是一款很酷的图片显示插件,可以在一个平滑展开的新窗口中展现出图片,而同时页面的其余部分都变成黑色背景。使用这 款插件,是为了当你的的图片过大必须缩小到页面的宽度时,可以...
Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.
自己收藏的一些Lightbox特效示例,希望这个能给玩酷的朋友带来帮助。
原来的lightbox脚本在最近的8年依然很火。它是100%免费使用
lightbox2.2,支持单多图展示lightbox2.2,支持单多图展示
网站图片浏览的特效 网站图片浏览的特效网站图片浏览的特效 网站图片浏览的特效网站图片浏览的特效 网站图片浏览的特效网站图片浏览的特效 网站图片浏览的特效
lightbox各种各样的效果,很漂亮
JS插件开发之LightBox,可兼容到IE6