【Layui】自行配置弹出层

最新推荐文章于 2023-03-11 19:11:46 发布

原创最新推荐文章于 2023-03-11 19:11:46 发布 · 796 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Layui

Layui 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一位作者在使用layui框架时遇到的问题，即在进行数据删除操作时，由于后台数据传递不便，决定放弃框架自带的弹出层，自行实现了删除确认弹窗功能。通过JavaScript代码展示了如何在点击删除按钮后，显示自定义的确认信息，并在用户选择确认后，通过POST请求调用后端接口完成数据删除，同时更新前端显示。

author：咔咔

wechat：fangkangfk

前端使用的是layui框架，点击删除的时候后台数据不好传，于是就索性不要自带的弹出层了，自己实现一个

//js代码
        $('.del').click(function(){
            var that = $(this);
            var dn_id = that.data('id');
            layer.open({
                title: false, 关闭左上角的‘信息’
                closeBtn :0,  关闭右上角的关闭
                content: '删除之后无法恢复，您确定要删除吗？'
                ,btn: ['确认', '取消']  配置按钮
                ,yes: function(index, layero){
                    $.post("{:url('domain/delDoamin')}",{dn_id:dn_id},function(r){
                        console.log(r)
                        if(r.code == 1){
                            that.parents('tr').remove();
                        }
                        else{
                            layer.msg(r.msg,{time:1800});
                        }
                    });
                    layer.close(index) 点击确定或者取消关闭弹出框
                }
            });
        })