开发环境
Drawer 在 弹出层 UI 上带来不一样的体验.

显示代码

								
							
抽屉

显示代码

								layui.use(['drawer'], function() {
									var drawer = layui.drawer;
								
								    drawer.open({
								        direction: "right",
								        dom: ".layer-top",
								        distance: "30%"
								    });
								})
							
进阶

显示代码

								var dom;
								
								$(".drawer-close-mask").click(function() {
								    dom = drawer.open({
								        direction: "right",
								        dom: ".layer-close-mask",
								        distance: "30%",
								        maskClose: false
								    });
								})
								
								$("#btnClose").click(function() {
								    dom.close();
								})
								
							
扩展

显示代码

								layui.use(['drawer'], function() {
									var drawer = layui.drawer;
								
								    $(".drawer-auto-close").click(function() {
								        dom = drawer.open({
								            direction: "right",
								            dom: ".layer-auto-close",
								            distance: "30%",
								            maskClose: false,
								            time: 1000
								        });
								    })
								})
							
扩展

显示代码

								layui.use(['drawer'], function() {
									var drawer = layui.drawer;
								
								    $(".drawer-auto-close").click(function() {
								        dom = drawer.open({
								            direction: "right",
								            dom: ".layer-auto-close",
								            distance: "30%",
								            success:function(){
								                layer.msg("触发回调函数"); 
								            }
								        });
								    })
								})
							

左侧弹层内容...


右侧弹层内容...


上侧弹层内容...


下侧弹层内容...


点击右侧灰色区域


打开 2秒 后自动关闭...