打开模态框

(作者：饶家俊，撰写时间：2019年4月25号)
什么是模态框，它不是页面跳转，只有触发的时候他会弹出一个窗体，来显示内容，它不会覆盖父窗体的子窗体。现在给大家介绍的模态框是我用来新增里面的数据的。

模态框，分三个部分模态框头部，模态框主体，模态框底部，这就是模态框的基本结构，因为我们有时候不会用到底部所以，可以把模态框底部直接删除，在到模态框主体来填写模态框里面的内容和样式。

模态框也分尺寸，我们可以通过

来创建一个小的模态框，

是来创建一个大的模态框。

我在模态框主体里面放了form表单，里面有四个内容，第一个input是用来重置form表单, reset重置按钮，为什么重置form表单，因为我们在给模态框输入完数据的时候，关闭在打开数据还是保存在模态框里面，又因为这个模态框是用来新增数据所以，这个时候的模态框里面应该是没有数据的，所以我们要重置form表单，来把模态框以前输入保存下来的数据清空。

在用两个div里面在label标签来放学院的名称和学院代号,在到div里面在放个div来嵌套input标签，在给它id和名称还有输入框，学院的名称和学院代号的id跟数据库保持一致。

在到后面就是写两个button按钮，保存和关闭,保存已经写了一个事件，关闭因为写data-dismiss="modal"点击它就会直接关闭，它就不用在写事件自带关闭的功能，现在我们只是把模态框构建出来了我们还要调用它把他显示出来，点击新增来弹出模态框。

在到模态框的最开始的div里面添加一个id，在通过id获取它在用modal(‘show’)，show来显示出来。
因为是新增数据所以我们要保证每次新增数据都空白的，所以要重置表单清空表单的内容，也要来调用它才会重置表单，我们在前面已经通过reset来重置表单清空表单的内容，所以我们只要来获取input中的reset来触发它的单击事件，实现置表单的效果。