layer弹窗按钮样式和提示文字内容如何修改?

layer弹窗按钮样式和提示文字内容如何修改?

复制代码
layer.confirm(‘Do you want to delete?’, {
skin: ‘demo-class’, //自定义类名
title: ‘tips’,
btn: [‘sure’, ‘cancel’] //修改按钮文字
}, function (index) {
// doSomething
layer.close(index); //关闭弹窗
}

layer.open({
skin: ‘demo-class’,
content: ‘Do you want to delete?’,
btn: [“sure”, “cancel”], //修改按钮文字
yes: function (index) {
layer.close(index) //关闭弹窗
},
});

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的 layer 弹窗封装示例,可以在网页中使用: ```html <!-- 引入 layer样式文件和脚本文件 --> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/theme/default/layer.css"> <script src="https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js"></script> <!-- 自定义样式 --> <style> .layer-popup { display: none; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, .3); z-index: 9999; } </style> <!-- 弹窗 HTML 结构 --> <div class="layer-popup"> <div class="layer-popup-title">弹窗标题</div> <div class="layer-popup-content">弹窗内容</div> <div class="layer-popup-buttons"> <button class="layer-popup-ok">确定</button> <button class="layer-popup-cancel">取消</button> </div> </div> <!-- 弹窗脚本代码 --> <script> function layerPopup(title, content, okCallback, cancelCallback) { // 创建 layer 弹窗 var $popup = $('.layer-popup'); $popup.find('.layer-popup-title').text(title); $popup.find('.layer-popup-content').html(content); $popup.show(); // 绑定按钮事件 $popup.find('.layer-popup-ok').click(function() { $popup.hide(); if (okCallback) { okCallback(); } }); $popup.find('.layer-popup-cancel').click(function() { $popup.hide(); if (cancelCallback) { cancelCallback(); } }); } </script> ``` 使用时,可以调用 `layerPopup` 函数弹出弹窗,例如: ```javascript layerPopup('提示', '确定要删除吗?', function() { // 点击确定按钮后的回调函数 console.log('点击了确定按钮'); }, function() { // 点击取消按钮后的回调函数 console.log('点击了取消按钮'); }); ``` 在实际应用中,需要根据具体的需求进行调整和优化,例如添加更多的样式和选项,支持异步操作等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值