首页 > 特效插件 > 表格弹出层 >  可嵌套的SexyLightBox弹出层引用本地和互联网内容正文

可嵌套的SexyLightBox弹出层引用本地和互联网内容

特效介绍
SexyLightBox弹出层嵌套网页

SexyLightBox弹出层嵌套本地html

        可嵌套的SexyLightBox弹出层引用本地和互联网内容。在本插件中,弹出层不光可以显示本地图片,还引用了本地的两个文件,并且以自适应和带滚动条的不同方式显示了第一个html文件,而“类似Iframe引用,并且可以传参”则引用了含有SexyLightBox弹出层的文件,并且实现了当前弹出层的左右晃动、关闭和显示图片的功能,这三个功能虽然是在引用页面实现的,可是引用页面并没有引入弹出层相关的js。“引用服务器网页-模板网”则为SexyLightBox弹出层显示互联网内容。
使用方法
1、在head引入下面的代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.3.jquery.min.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />
<script type="text/javascript">
$(document).ready(function(){
  SexyLightbox.initialize({color:'white', dir: 'sexyimages'});
});
</script>
调用函数参数说明:color为SexyLightBox弹出层边框的颜色,这里为黑色,白色的效果参见“白色风格动感的SexyLightBox弹出层jQuery代码http://www.5imoban.net/texiao/table/2014/0412/458.html”。dir是弹出层风格的路径,例如SexyLightBox弹出层背景图片、弹出层关闭按钮、上一页下一页按钮等。
2、如果SexyLightBox弹出层为图片:在需要使用SexyLightBox弹出层特效的图片外面套个a链接,a链接的rel="sexylightbox"属性为使用没有翻页效果的弹出层特效,rel="sexylightbox[group1]"属性(数组)为使用有翻页效果,即如果你想让几个层有上一页下一页效果,rel的sexylightbox[]里面填写相同的字符串或者数字即可。a链接的href=""里面的地址为大图地址。而title=""属性里面的字符串将会显示在弹出层下面。
3、如果SexyLightBox弹出层显示当前页面的某一段内容:则在需要点击弹出的文字外面的a链接的href的值写成下面的格式“#TB_inline?height=125&width=350&inlineId=myOnPageContent”,“#TB_inline”就是显示当前页内容,inlineId为需要显示的内容的ID。
4、如果SexyLightBox弹出层为引用本地网页:在需要引用的a链接的href的值写成如下格式“demo-iframe.html?TB_iframe=true&height=200&width=350”,其中的demo-iframe.html为引用页文件名,后面的为宽高。
5、如果SexyLightBox弹出层引用的为互联网网页:在需要引用的a链接的href的值写成如下格式“http://www.5imoban.net?TB_iframe=true&height=450&width=800”,其中的http://www.5imoban.net为引用的网址,例如“http://www.baidu.com”,后面的为宽高。
6、我们再看看“类似Iframe引用,并且可以传参”所引用的文件,发现代码如下:
<div style="padding:0 20px; text-align:center">
    <p>iframe网页</p>
    <p><button onclick="window.parent.SexyLightbox.close(); return false;">关闭父SexyLightbox弹出层</button></p>
    <p><button onclick="window.parent.SexyLightbox.shake(); return false;">左右晃动父SexyLightbox弹出层</button></p>
    <p><button onclick="window.parent.SexyLightbox.display('images/iguazu02.jpg'); return false;">在父SexyLightbox弹出层打开图片</button></p>
</div>
我们可以看到SexyLightbox弹出层的三个方法:close()、shake()、display(),分别是关闭、晃动和显示图片。