模态框_html模态框

模态框_html模态框1. 模态框 1.1 什么是模态框 模态框就是在原有的界面上再新增加一个窗口,这样能够在不刷新网页的前提下和后台完成交互。 1.2 模态框分层 模态框分为分层 1. 网页层:原本的页面,通过原本页面的按钮等能调出模态框的功能 2.阴影层:在网页层上有一层阴影,用来表示对原网页的遮挡 3.弹框层:在弹

1. 模态框

1.1 什么是模态框

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

模态框_html模态框

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);#}
            }
            ;
        },
    });

 

今天的文章模态框_html模态框分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/52757.html

(0)
编程小号编程小号
上一篇 2023-08-31 09:46
下一篇 2023-08-31 10:11

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注