模态框

1. 模态框

1.1 什么是模态框

模态框就是在原有的界面上再新增加一个窗口，这样能够在不刷新网页的前提下和后台完成交互。

1.2 模态框分层

模态框分为分层

1. 网页层：原本的页面，通过原本页面的按钮等能调出模态框的功能

2.阴影层：在网页层上有一层阴影，用来表示对原网页的遮挡

3.弹框层：在弹出的框框中，输入相应的信息，进而获取数据进行逻辑判断。

【注意点】：在原网页上的阴影层和弹框层可能会因为层级的问题导致弹框层在阴影层下方，

　　　　        处理方式是通过--z-index来区分哪一层在最上方。

 

1.21模态框方式实现对表单的操作

$.ajax({
        type: 'post',    //向后台提交数据的方式
        url: "/model_add_classes/",  //提交给后台的url，因为这里是本站跳转，直接写uri就可以
        data: {"classname": $('.classname').val()},
        //data是向后台提交的数据，用字典的方式传送，后台通过key进行取值
        //success是后台成功返回信息的情况，对应函数里的参数就是后台发送的数据
        success: function (data) {
            if (data == 'ok') {
                //刷新页面通过 window.location.href = '/model_classes';
                window.location.href = '/model_classes';
            } else {
                $('.tips').text("用户名不能为空");
                {#console.log(data);#}
            }
            ;
        },
    });