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

本文链接：https://blog.youkuaiyun.com/u010480282/article/details/80727544

本文介绍了一种解决layer.photos遮罩层仅遮罩iframe子窗口而非父窗口的方法，通过在父窗口创建函数并传递图片数组到该函数实现整个页面的遮罩效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发中，对话框显得是不可或缺的组建，而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);
		});

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