使用Layui设置模态框

开发工具与关键技术：Visual Studio + C# + Layui

 

撰写时间：2019.6.25

 

Layui与Bootstrap都是我们开发项目中常用的前端 UI 框架，两种方法都可以实现弹出模态框，然而过多的情况下我们使用的是Bootstrap的模态框，因为bootstrap 在前端响应式方面做得很好。而Layui门槛极低，拿来即用，可以轻轻松松就可以弄一个很美观的后台界面出来，省事省力。下面就来简单的使用Layui框架设置一个模态框。

如图，上面是我用layui简单搭建出来的模态框。首先我们需要引用到layui插件

<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />

<script src="~/Plugins/layui/layui.js">script>

然后我们模仿Bootstrap的模态框，设置模态框的样式和所需要的内容，然后设置display属性隐藏模态框，同时也是需要给模态框最外层的div设置ID。设置好模态框的基本样式之后，我们需要怎么样去触发弹出模态框，或者设置一些基本参数呢？

我们先来看一下，Bootstrap是如何弹出模态框的。首先我们需要设置一个方法，写出隐藏域用于存放修改时需要的主键，设置模态框标题，总体来说比较样式单调，设置的一些特效需要比较大的代码量，并且需要熟悉Bootstrap。

而Layui就显得方便许多，可以直接轻松设置各种配置，首先Layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）；anim提供多种弹出动画；maxmin在右上角设置最大化最小化按钮；然后自定义宽高、标题、弹出模态框后的背部阴影等等，一系列的配置轻松设置，可以让你的页面显得比较多元化。

最后content可传入的值是灵活多变的，不仅可以传入普通的html内容，还可以指定DOM，更可以随着type的不同而不同。然后上面content传入的是我前面写的模态框内容，直接获取模态框最外层div的ID即可，然后再调用这个方法就轻松弹出一个美观、带特效的模态框啦!

详细的配置信息请参考：layui官方文档https://www.layui.com/doc/modules/layer.html