评论（7）
<style>
html{background-color:#E3E3E3; font-size:14px; color:#000; font-family:'微软雅黑'}
a,a:hover{ text-decoration:none;}
pre{font-family:'微软雅黑'}
.box{padding:20px; background-color:#fff; margin:50px 100px; border-radius:5px;}
.box a{padding-right:15px;}
#about_hide{display:none}
.layer_text{background-color:#fff; padding:20px;}
.layer_text p{margin-bottom: 10px; text-indent: 2em; line-height: 23px;}
.button{display:inline-block; *display:inline; *zoom:1; line-height:30px; padding:0 20px; background-color:#56B4DC; color:#fff; font-size:14px; border-radius:3px; cursor:pointer; font-weight:normal;}
.photos-demo img{width:200px;}
.button {
padding: 0 15px;
line-height: 30px;
border: none;
background-color: #99CC66;
color: #fff;
font-size: 12px;
border-radius: 3px;
cursor: pointer;
}
</style>
<button id="test2" class="button">捕获页面元素</button>
<div class="box">
<h2 style="padding-bottom:20px;">扩展模块：图片查看器（相册层）</h2>
<div id="photosDemo" class="photos-demo">
<!-- layer-src表示大图 layer-pid表示图片id src表示缩略图-->
<img layer-src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" layer-pid="" src="http://static.oschina.net/uploads/space/2014/0516/012728_nAh8_1168184.jpg" alt="layer宣传图">
<img layer-src="http://sentsin.qiniudn.com/sentsinmy5.jpg" layer-pid="" src="http://sentsin.qiniudn.com/sentsinmy5.jpg" alt="我入互联网这五年">
<img layer-src="" layer-pid="" src="http://sentsin.qiniudn.com/sentsin_39101a660cf4671b7ec297a74cc652c74152104f.jpg" alt="微摄影">
<img layer-src="http://sentsin.qiniudn.com/sentsinsan01.jpg" layer-pid="" src="http://sentsin.qiniudn.com/sentsinsan01.jpg" alt="三清山">
<img layer-src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg" layer-pid="" src="http://ww2.sinaimg.cn/mw1024/5db11ff4jw1ehcyirr6quj20q00ex42w.jpg" alt="国足">
</div>
</div>
$('#test2').on('click',function(){
layer.open({
type: 1,
shade: false,
title: false, //不显示标题
content: $('.photos-demo'), //捕获的元素
cancel: function(index){
layer.close(index);
this.content.show();
layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构',{time: 5000});
}
});
});
发布评论
需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。