【layer对话框】iframe内的layer.photos怎样显示在父窗口中

在开发中，对话框显得是不可或缺的组建，而layer作为一款优秀的开源免费的js插件，受到了越来越多的开发者的喜欢

关于layer的具体使用，可以参考官网的api，很详细    http://www.layui.com/doc/modules/layer.html

    今天在开发中遇到这么一个问题，就是在做后台时，用到了iframe来显示各个不同的页面内容，其中做了做了一个相册，很炫的动画，甚是满意，但是很快就发现一个美中不足的问题--layer.photos的遮罩层仅仅遮罩了iframe子窗口，而不是父窗口，给人感觉特别不好，效果如图所示：

而我是一个追求完美的人，怎么可以容忍这样的结果呢？果然不负有心人，终于找到了答案！

【解决之道】

首先在父窗口构建一个函数：

	function showPhotos(images) {
		layer.photos({
			area: '400px',
			shade: [0.85, '#000'],
			anim: 0,
			photos: {
				"title": "任务附件预览",
				"id": 'showImages',
				"data": images
			}
		});
	}

然后再子窗口，构建一个关于相册json字符串，调用showPhotos()函数即可

$("#task_pic_list .task_pic img").click(function(){
			var images = [   //相册包含的图片，数组格式
				{
					"alt": "图片名1",
					"pid":  1, //图片id
					"anim": 0,
					"src": "__IMG__/01.jpg", //原图地址
				},
				{
					"alt": "图片名2",
					"pid": 2, //图片id
					"anim": 0,
					"src": "__IMG__/01.jpg", //原图地址
				},
				{
					"alt": "图片名3",
					"pid": 3, //图片id
					"anim": 0,
					"src": "__IMG__/01.jpg", //原图地址
				},
				{
					"alt": "图片名4",
					"pid": 4, //图片id
					"anim": 0,
					"src": "__IMG__/01.jpg", //原图地址
				}
				
			];
			
			
			parent.showPhotos(images);
		});

终于搞定了，看一下效果吧，分享一下寡人的喜悦，

我的大作 欢迎来踩 www.iis7.com