top.layer弹出层

 

 

在开发中经常会用到页面嵌套,但嵌套子页面中的layer弹出层只在子页面显示的话会有些不美观。

top.layer弹出层_第1张图片

这时候将layer弹出层放到顶层,就会协调很多。

top.layer弹出层_第2张图片

 

这点layui就做的非常好,方法简约而又不失内涵。

Layer与top顶层窗口非常契合,只需在要打开的layer弹出层前面加上top就可将其弹出在顶层页面。

一般的提示框都没什么,但若要用layer来实现模态框效果就需要注意一些地方了。

 

初始化layer模块后

使用Top.layer.open打开弹出层

其中的参数有很多种选择,具体可以参照layui文档

我这里的内容写在本页面的HTML中的,所以使用type:1;来解析content

如果是使用URL找到内容,需要使用type:2来解析url字段;

如果在内容中有自定义的点击事件,需要和layer写在一个函数中并加上top.

 

我使用的参数就是如下了

layui.use(['layer'], function () {

                var layer = layui.layer, $ = layui.$;

                top.layer.open({

                    type: 1,//类型

                    skin: 'layui-layer-molv',

                    area: ['600px', '470px'],//定义宽和高

                    title: '我要撤标',//题目

                    shadeClose: false,//点击遮罩层关闭

                    content: $('#motaikunag').html(),//打开的内容

                });

            });

但在自己写的按钮中实现关闭layer有点问题,我目前使用的是

       top.layer.closeAll();//全部关闭

其它的我试了没效果。

 

 

你可能感兴趣的:(2019-7-19)