layui扩展：实现右侧滑出弹层效果

最近做一个项目，前端用的是layUI，遇到了查看详情页面的需要占半屏幕打开的效果。就想到了右侧滑出页面的方式，看了半天的layUI 的弹层API文档发现没有类似的效果，最后进行了扩展。

具体实现以下功能：

1、右侧滑出层

2、可自定义层宽度

3、关闭按钮

4、跟随窗口变化自动调整弹出层宽高度

具体实现如下：

在layui的插件目录文件夹/static/home/js/module/下创建自定义的js文件rightpage.js，js文件写入代码，代码如下：

layui.define(['layer'], function(exports){
    var layer = layui.layer;
    var obj = {
        open: function (content='',width='88%') {
            layer.open({
                type: 2,
                title: '',
                offset: ['1px', '100%'],
                skin: 'layui-anim layui-anim-rl layui-layer-admin-right',
                closeBtn: 0,
                content: content,
                area: [width, '100%'],
		success:function(obj,index){
		    if($('#rightPopup'+index).length<1){
			var btn='<div id="rightPopup'+index+'" class="right-popup-close" title="关闭">关闭</div>';
			obj.append(btn);
			$('#rightPopup'+index).click(function(){
			    let op_width = $('.layui-anim-rl').outerWidth();
			    $('.layui-anim-rl').animate({left:'+='+op_width+'px'}, 200, 'linear', function () {
			        $('.layui-anim-rl').remove()
			        $('.layui-layer-shade').remove()
			    })
			})
		    }
		}
            })
        }
    };
    exports('rightpage', obj);
});

相关的CSS代码如下：

@keyframes layui-rl{
    from{transform:translateX(0px);}to{transform:translateX(-100%);}
}
@-webkit-keyframes layui-rl{
    from{transform:translateX(0px);}to{transform:translateX(-100%);}
}
.layui-anim {
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.layui-anim-rl {
    -webkit-animation-name: layui-rl;
    animation-name: layui-rl;
}
.layui-layer-admin-right {
    box-shadow: 1px 1px 10px rgba(0,0,0,.1);
    border-radius: 0;
    overflow: auto;
}
.layui-anim-rl.layui-layer-iframe{
	overflow:inherit!important;
}
.right-popup-close{position: absolute;
    width:50px;
    height:44px;
    line-height:44px;
    text-align:center;
    left: -50px;
    right:0;
    top: 50px;
    background-color:#FF5722;
    color:#fff;
    border-radius:4px 0 0 4px;
    cursor:pointer
}

调用方式：

	<script src="/static/layui/layui.js?v=1.0.2"></script>
	<script>
		var base='/static/home/js/module/';
		var extendArray=['rightpage'];
		var extend={};
		if(extendArray){
			if(extendArray.length>0){
				for(var i=0;i<extendArray.length;i++){
					extend[extendArray[i]]=extendArray[i];
				}
			}
		}
		layui.config({
		  base: base,
		  version:'1.0.2'
		}).extend(extend).use(extendArray, function(){
			rightpage = layui.rightpage;
			rightpage.open("/home/admin/add.html");
		});
	</script>