layui写弹出框显示表单信息_layui 弹出框提交表单

layer.open({

type:1,

title:"发送消息",

skin:"myclass",//自定样式

area:["800px","400px"],

btn: ['发送', '取消'],

btnAlign:'c', //按钮居中

content:$("#t"), //如果要form表单提交必须是$("#t") dom元素,不能是$("#t").html()

success:function(layero, index){

form.render();//动态渲染

form.verify();

form.on('submit(t_form)', function(data){

$.ajax({

url:"",

dataType:"json", //返回格式为json

async:true,

data:data.field,//参数值

type:"POST", //请求方式

success:function(req){//请求成功时处理

//console.log(req);

if(req.code === 1){

layer.close(index);//关闭弹窗

layer.msg('发送成功', {icon: 6});

}else{

layer.msg('发送失败 '+req.msg, {icon: 5});

}

},

error:function(){//请求出错处理

layer.msg('发送失败', {icon: 5});

}

});

});

},

yes:function(index, layero){

layero.find('.sub-btn').click(); //这一句就是点击确认按钮触发form的隐藏提交

}

});

layui是一个轻量级的前端UI架,它提供了一个便捷的方式来创建弹出窗口,通常用于显示表单等需要用户交互的内容。要在layui中展示包含表单弹出,你可以按照以下步骤操作: 1. 首先,在HTML结构中引入layui的CSS和JS文件。 ```html <link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js"></script> ``` 2. 使用layui的`layer.open()`函数打开一个弹窗,传入一个配置对象。其中,可以设置`type`属性为`form`,然后指定弹出内容,比如一个HTML片段或者通过字符串形式的数据动态构建表单。 ```javascript var formHtml = '<form class="layui-form">' + '<input type="text" lay-verify="" placeholder="请输入内容"/>' + '</form>'; // 这里是一个简单的表单示例 // 弹出表单的窗口 layui.use(['layer', 'form'], function () { var layer = layui.layer; var form = layui.form; layer.open({ type: 2, // 2表示加载外部页面 title: '表单', shadeClose: true, // 关闭遮罩层时关闭弹窗 area: ['auto', 'auto'], content: formHtml, btn: ['提交', '取消'], // 提交和取消按钮 yes: function(index, layero, formo) { // 确定按钮点击后的回调 form.layFormSubmit(formo); // 如果有表单验证,这里触发提交 layer.close(index); }, no: function() { // 取消按钮点击后的回调 layer.close(index); } }); }); ``` 在这个例子中,当用户点击“提交”按钮时,你需要编写`layFormSubmit`函数来处理表单数据。如果不需要验证,可以直接获取表单元素并发送到服务器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值