弹出层

开发工具与关键技术：VS与MVC
作者：刘华叶
撰写时间：2019年6月3日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
我们做项目的过程中会遇到很多知识点，比如：这个经常用到的弹出层，这个知识点涉及的相当广泛，有很多种，我先给大家介绍一下它的这些类型。
 
closeBtn - 关闭按钮
类型：String/Boolean，默认：1
layer提供了两种风格的关闭按钮，可通过配置1和2来展示，如果不显示，则closeBtn: 0
shade - 遮罩
类型：String/Array/Boolean，默认：0.3
即弹层外区域。默认是0.3透明度的黑色背景（'#000'）。如果你想定义别的颜色，可以shade: [0.8, '#393D49']；如果你不想显示遮罩，可以shade: 0
shadeClose - 是否点击遮罩关闭
类型：Boolean，默认：false
如果你的shade是存在的，那么你可以设定shadeClose来控制点击弹层外区域关闭。
time - 自动关闭所需毫秒
类型：Number，默认：0
默认不会自动关闭。当你想自动关闭时，可以time: 5000，即代表5秒后自动关闭，注意单位是毫秒（1秒=1000毫秒）
id - 用于控制弹层唯一标识
类型：String，默认：空字符
设置该值后，不管是什么类型的层，都只允许同时弹出一个。一般用于页面层和iframe层模式



我们经常要用到增删查改，那么，它们就要用到模态框，今天就和大家介绍一下这个弹出模态框。
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190609154932904.PNG)
首先给新增操作设置一个按钮和点击事件。
 
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190609154954885.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI4NQ==,size_16,color_FFFFFF,t_70)
首先一个模态框拥有两部分，一部分是头部，另一部分是内容，我们首先设置一个div把它们包起来，给最外层的div设置一个id，接下来在设置头部代码，然后在去设置内容，给所有内容里面的字段都设置一个id。Id是用于控制弹层唯一标识，任何一个出现错误，功能就实现不了。

![在这里插入图片描述](https://img-blog.csdnimg.cn/20190609155012675.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI4NQ==,size_16,color_FFFFFF,t_70)
  

内容就要设置一个form表单，在设置一个id，把内容放在表单里面，设置好内容后，就在设置一下保存和关闭的按钮，设置好后，在设置js代码，去实现它的功能。

 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190609155024515.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MDI4NQ==,size_16,color_FFFFFF,t_70)

设置一个打开模态框的方法，这个方法名称要和上面新增操作的点击事件的名称要保持一致，然后在打开模态框，要和最外层的id名称要保持一致，重置表单的id也是一样的，完成后就可以打开模态框了。