HTML页面使用layer弹出框输入数据

javascript中layer是一款近年来备受青睐的web弹层组件，layer.open对弹出框进行输入信息，并处理返回结果。详细介绍http://layer.layui.com/

部署：将layer.js文件和skin目录复制到项目的./static/js目录中，在页面中引用js/layer.js

<script >
function add_account() {
         var index = layer.open({            //打开layer弹出框
                type: 1,                     //类型
                skin: "layui-layer-rim",     //皮肤类型，在skin文件夹中
                area: ["400px", "400px"],    //范围大小
                title: "标题",               //定义标题
                content: 'html字符串',       //输出的字符串，定义弹出框的html页面
                btn: ['确定', '取消'],　　　　//按钮
                yes: function (index, layero) { //确定按钮的处理函数
                    id_name = $("#id_name").val(); //根据id取数据
                     $.ajax({
                        url: '{% url "urlname" %}',      //指向URL名称
                        type: 'POST',                    //页面传值类型
                        data: {"key": ’value’},           //提交数据，以字典的形式
                        success: function (e) {          //提交数据成功后的处理函数，e是返回的值
                            if (e == 1) {
                                parent.location.reload(); //刷新父页面
                                layer.msg("good");
                            } else {
                                layer.msg("sorry")
                            }
                        },
                    });
                },
                btn2: function (index, layero) { //取消按钮后的处理函数
                    layer.close(index); 
                },
            });
        }
</script >

 

转载于:https://www.cnblogs.com/sdlyxyf/p/10604180.html