Layui的弹出层

逃离我推掉我的手 2022-01-22 03:09 866阅读 0赞

1：先在HTML页面上放一个button按钮，给按钮ID，设置样式，按钮的作用就是弹出layui的open层：

<button|type=“button”|id="Open”|style=“width:100px;height:40px;margin:5% 50%;background:\#7d19ce; border:none;color:\#fff”>弹出层

2：在JS中先引用Layui的插件，即：Layui.all.js；再写相关代码：在页面加载事件中通过layui.use（）加载你所需的Layui模块，比如我们所需的open层在layer这个模块里面，那么你就通过layui.use(‘layer’)加载layer这个模块，再定义一个变量名称来装；
    window.onload = function () {
            layui.use('layer', function () {
                var layer = layui.layer;
            });
        }

3：加载完layui模块，接着就是如何使用它了：先通过ID获取到刚刚那个按钮，给按钮点击事件，点击按钮时就弹出layui的open层：document.getElementById(“Open”).οnclick=function()\{ layer.open(\{\}) \};这时候当你在浏览器上点击按钮时就会弹出layui默认的，没有设置任何数据的框：  
浏览器效果截图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]  
4：上面就是原始的框，可以说是不怎么美观，那么我们现在来给它放一些基础的数据：  
比如第一个参数：type（基础层类型），这个就是选择你需要弹出层的某种类型，如果你要弹出信息层的话就传入0，也就是上图的那种，它是默认的，如果要弹出页面层就传入1、iframe层就传入2、加载层就传入3、tips层就传入4，根据你具体所需要的弹出层来传入，现在的话就用1，也就是页面层来演示后面的效果；  
第二个参数：title（标题），也就是上图里的那个信息，这里给它取名为title:’页面层演示’；  
第三个参数：content（内容），如果是1页面层的话就直接在里面传入任意的文本或者HTML就OK了；但如果是2iframe层的话就不是传入文本了，而是传入URL（路径），如果执行4tips层的话就是传入\{‘内容’，‘\#id’\}，第二项为吸附元素选择器或者DOM；在这里的话我们就随便在内容里面输出一些文字作为演示；  
如果你觉得弹出层不太美观的话你也可以通过第四个参数：skin（皮肤）来设置你所中意的弹出层风格，你也可以试试layui自带的两个skin：layui-layer-lan和layui-layer-molv，第一个的话标题的背景颜色是蓝色的，第二个标题的背景颜色是墨绿色的，比原先默认的白色还是要好看很多；当然，你可以根据自己的风格来设置；  
因为弹出层默认的宽高实在是太小了，装不下什么东西，所以可以通过：area（宽高）来改变，比如这里给它宽500px，高300px：area：\[‘500px’,’300px’\]，注意，这里第一个参数为宽，第二个参数为高；接下来我们再来看看浏览器里面的效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]  
5：这时候是不是发现比刚开始默认的弹出层要好看一些了呢，而且通过上图可以看到：弹出层的坐标位置是默认居中的，所以可以不用设置，如果你不需要让它居中，需要让它根据自己固定的坐标来设置的话，你可以用：offset（坐标）来设置，比如：offset：\[‘100px’,’100px’\],定义top（上），left（左）坐标；offset：‘t’，快捷设置顶部坐标等等；而且一般弹出层都有最大化最小化，如果你也需要弄的话就用：maxmin显示true就有最大最小化的功能了，但是需要注意的是，这个功能只对1页面层和2iframe层有效，其他的就不行了；还有是否允许窗口拉伸，就是拖动右下角拉动尺寸，如果你不需要拉伸的话，设置resize:false；即可；如果你设置了：scrollbar:false；那么浏览器就会被禁止滚动；maxWidth用来设置弹出层的最大宽度，同样的，那么maxHeight就是用来设置弹出层的最大高度；你如果不需要拖动弹出层，那么你可以设置move：false，禁止拖拽；  
拥有最大最小化按钮并且坐标为顶部和禁止拉伸，禁止拖拽的弹出层效果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]  
6：除了这些还有许多的辅助功能，其中还需要说到的就是btn（提示按钮），不知道大家有没有注意到：在最开始的默认弹出层时右下方有一个确认按钮；是的，那个是0信息层自带的一个btn按钮，但是在其他层里面是没有的，那么如果你也需要提示按钮应该怎么做呢：btn:\[’按钮一’,’按钮二’,’按钮三’\]，这样就会在右下角显示出三个你刚刚自定义的三个按钮了，如果你需要当点击按钮后实现什么功能的话，就可以回调，第一个按钮的回调是yes，第二个为btn2：function()\{\}；……以此类推，比如，当你点击按钮一时弹出提示框“按钮1”，点击按钮二时弹出提示框“按钮2”等；  
浏览器效果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 3]  
上图为点击按钮一时的回调：弹出提示框“按钮1”;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220122/00738ec509f643ef81af09fdad2968d6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220122/3006bbf5cc4b418f8caaec19edd80360.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]: /images/20220122/49e4562c0e5c43f18530ba909250bb23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 3]: /images/20220122/e0dff5be5a7b4ddfb1537d10ad227c62.png