开发工具与关键技术: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