点击按钮弹出模态框

1. 点击按钮弹出模态框在许多应用与网站中都有运用，有无论是什么应用或者网址都会出现模态框
2. 新增模态框具体如下

//打开新增模态框

        function openInsertModal() {

            //重置表单 DOM.reset()

            $("#formGrade")[0].reset();

            //设置模态框标题

            $("#modalTitle").text("新增年级")

            //弹出模态框

            $("#GradeModal").modal("show")

        }

2、 这是新增弹窗的模态框，点击新增按钮后便会执行这个代码，当然想执行这个代码必须给相对应的按钮加上onlick点击事件

3、

4、 <div class="col-auto">

5、    <button class="btn btn-outline-primary" type="button" οnclick="openInsertModal()">新增</button>

6、             </div>

7、 这个是需要加点击事件的按钮，给按钮标签<button></button>标签的后面加上onlick点击事件然后把创建的自定义函数输入进去即可执行此代码

8、

最终实现的就是这样的，启动自带的网页浏览功能进行浏览。

 如例：点击新增按钮便会显示弹出的模态框

<link href="~/Content/bootstrap-4.5.3-dist/css/bootstrap.min.css" rel="stylesheet" />

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

如要做此弹窗既需要引用一些插件不然想完成此页面遥遥无期，上面两排就是此页面所需插件，此插件里的布局会根据这两排插件去进行布局，可让你减少布局时间，让你不必再布局上耗费心神

<!--jQuery库必须在bootstrap之前引入-->

    <script src="~/Content/js/jquery-3.2.1.min.js"></script>

    <!--bootstrap框架-->

    <script src="~/Content/bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>

    <!--layui框架-->

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

上面这个就是引用了js的插件，这个是为了方便减少事件直接引用即可