2021-06-28

点击按钮弹出模态框

1. 点击按钮弹出模态框在许多应用中和网站中都有，有登入界面还有其他报错或报对的网址都会有模态框。

//打开新增模态框

        function openInsertModal() {

            //重置表单 DOM.reset()

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

            //设置模态框标题

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

            //弹出模态框

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

1.         }
2. 这个是新增弹窗的模态框，点击新增按钮后就会执行这个代码，当然想执行这个代码必须给相对应的按钮加上点击事件
3. 
4. <div class="col-auto">
5.    <button class="btn btn-outline-primary" type="button" onclick="openInsertModal()">新增</button>
6.             </div>
7. 这个就是需要加点击事件的按钮，给按钮标签<button></button>的后面加上onlick这个点击事件然后把创建的自定义函数输入进去就可以执行这行代码
8. 

最终实现的就是这样的，点击启动VS中的使用浏览器进行浏览。

点击有边的新增按钮显示弹出模态框

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

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

要做这个弹窗这些插件是不能少的，上面这两个就是CSS的插件，里面的布局会根据这两个CSS里的来进行布局就不用自己去敲，能减少很多时间。

<!--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的插件，这个也是为了方便减少事件直接引用进来就行了。