layer使用记录

1、多弹出层共存的问题

使用layer.open打开一个弹出层后，在弹出层上进行其他点击操作时，触发了另外一个弹出层，这时候第一个弹出层消失了。
如果需要保持第一个弹出层不消失，需要在layer.open时，设置type属性值为1或者2即可。
默认type是0，为信息框，有其他弹出层时会自动关闭。

2、图片查看器（单张查看）

我们页面中有缩略图时，需要图片预览功能。除了phtots，我们还可以使用open实现单张图片的预览效果，展示图片实际尺寸

			var img ='1.png';
			var img_obj = new Image();
            img_obj.src= img;
            var height = img_obj.height * 1; //获取图片高度
            var width = img_obj.width * 1; //获取图片宽度
            //获取窗口宽高,不填满，避免图片过大时无法点击到遮罩层关闭
            var body_height = $('body').height()*1*0.9;
            var body_width = $('body').width()*1*0.9;
            if(width > body_width){
                width = body_width;
            }
            if(height > body_height){
                height = body_height;
            }
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area:[width+'px',height+'px'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                content: '<image src="'+img+'">'
            });
            /*****************/
            //当在ifream中调起弹窗时，弹窗会被限制在当前ifream内
            //当我们的图片较大，想在当前网页全屏显示时，使用如下代码
            /*****************/
            //获取最顶层窗口的宽高
            var body_height = window.top.document.body.clientHeight*0.95;
            var body_width = window.top.document.body.clientWidth*0.95;
            //在最顶外层窗口打开弹窗
            top.layer.open({...});
            //在上级窗口打开弹窗
            parent.layer.open({...});
            //在上上级窗口打开弹窗
            parent.parent.layer.open({...});

3、图片查看器（多张查看）

多张图片查看，可以使用layer自带的相册层。但是当图片较大时，会被缩放，有时候需要查看大图，这是可以添加相关代码，实现鼠标滚轮控制图片缩放

			//img 点击的图片对象
			function show(img){
            let imgs = img.parent().children('img');
            let photo_json = {
                "title": "", //相册标题
                "id": 123, //相册id
                "start": 0, //初始显示的图片序号，默认0
                "data": []  //相册包含的图片，数组格式
            };
            imgs.each(function(){
                //alert($(this).attr('src'))
                photo_json.data.push({
                    "alt": "",
                    "pid": 666, //图片id
                    "src": $(this).attr('src'), //原图地址
                    "thumb": "" //缩略图地址
                });
            });
            layer.photos({
                photos: photo_json
                ,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
            });
        }
        show();
		//鼠标滚轮控制图片缩放
		$(document).on("mousewheel DOMMouseScroll", ".layui-layer-phimg img", function (e) {
	    var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
	        (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1)); // firefox
	    var imagep = $(".layui-layer-phimg").parent().parent();
	    var image = $(".layui-layer-phimg").parent();
	    var h = image.height();
	    var w = image.width();
	    if (delta > 0) {
	
	        h = h * 1.05;
	        w = w * 1.05;
	
	    } else if (delta < 0) {
	        if (h > 100) {
	            h = h * 0.95;
	            w = w * 0.95;
	        }
	    }
	    imagep.css("top", (window.innerHeight - h) / 2);
	    imagep.css("left", (window.innerWidth - w) / 2);
	    image.height(h);
	    image.width(w);
	    imagep.height(h);
	    imagep.width(w);
	});