layer弹html文件,layer系列之弹层layer.prompt

本文介绍了如何使用layer.js库创建弹窗并添加多行文本框、按钮及其事件处理。通过layer.open和layer.prompt,可以实现用户交互,包括获取文本框输入值并在用户点击按钮时执行相应的逻辑。当使用layer.prompt时,若文本框为空,点击确定按钮不会触发回调。解决此问题的方法是在回调函数中进行输入值的检查并执行后续操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

layer官网:https://www.layui.com/doc/modules/layer.html

layer在线调试:http://layer.layui.com/

使用layer.open实现方式:

附:源码如下

layer.open({

//formType: 2,//这里依然指定类型是多行文本框,但是在下面content中也可绑定多行文本框

title: '是否确信将账号临时挂账?',

area: ['300px', '240px'],

btnAlign: 'c',

closeBtn:'1',//右上角的关闭

content: `

备注:

`,

btn:['确认','取消','关闭'],

yes: function (index, layero) {

var value1 = $('#remark').val();//获取多行文本框的值

alert('您刚才输入了:' + value1);

layer.close(index);

//可执行确定按钮事件并把备注信息(即多行文本框值)存入需要的地方

},

no:function(index)

{

alert('您刚才点击了取消按钮');

layer.close(index);

return false;//点击按钮按钮不想让弹层关闭就返回false

},

close:function(index)

{

alert('您刚才点击了关闭按钮');

return false;//点击按钮按钮不想让弹层关闭就返回false

}

});

56f6026bcfc748e70d9d9241285aeff5.png

附:layer.open中按钮点击事件:

layer.open({

content: 'test'

,btn: ['按钮一', '按钮二', '按钮三']

,yes: function(index, layero){

//按钮【按钮一】的回调

},btn2: function(index, layero){

//按钮【按钮二】的回调

alert('这是点击了按钮二');

return false;//点击后不关闭窗口,需返回false

},btn3: function(index, layero){

//按钮【按钮三】的回调

alert('这是点击了按钮三');

return false;//点击后不关闭窗口,需返回false

}

,cancel: function(){

//右上角关闭回调

}

});

用layer.open可以实现弹出文本框及按钮事件,layer.prompt也是在layer.open基础上的封装.....

使用layer.prompt时,

如果文本框输入值是空的话点击确定没有反应,不能向下执行。

但是我又需要在这种情况下去继续执行判断或逻辑时该怎么做??

注:使用layer.prompt时,layer使用的版本为layer-v3.0

官方代码说明如下:

//prompt层新定制的成员如下

{

formType: 1, //输入框类型,支持0(文本)默认1(密码)2(多行文本)

value: '', //初始时的值,默认空字符

maxlength: 140, //可输入文本的最大长度,默认500

}

//例子1

layer.prompt(function(value, index, elem){

alert(value); //得到value

layer.close(index);

});

//例子2

layer.prompt({

formType: 2,

value: '初始值',

title: '请输入值',

area: ['800px', '350px'] //自定义文本域宽高

}, function(value, index, elem){

alert(value); //得到value

layer.close(index);

});

示例代码如下:

layer.prompt({

formType:2,

title:'请填写排除原因(注:必填项)',

area:['500px','150px'],

btnAlign:'c'

},function(value,index,elem){

alert(value);

laker.close(index);

});

4bf5e138dfff5a2bbf1e803b1ad6396d.png

由官网查看文档可知layer.prompt也是继承layer.open的,所以改成如下所示:

layer.prompt({

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值