layui删除弹窗

最新推荐文章于 2023-05-03 15:28:27 发布

原创最新推荐文章于 2023-05-03 15:28:27 发布 · 2.9k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#弹窗

layui学习专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何在执行删除操作时利用layui库创建一个简单的确认删除弹窗提示，提供了一种增强用户体验的方法。

执行删除操作时，设置一个简单的弹出提示框


<button type="button" class="layui-btn layui-btn-danger" data-id='${rl.id}' data-type="test2">删除</button>

<script>
        $(function () {
            // 监听删除点击事件，页面刷新就开始监听点击事件
            // 添加监听后，触发事件被触发，就会执行下面的代码
            $(document).on('click','.layui-btn-danger',function(e){
                console.log($(e.target).data().id);
            })

            layui.use('layer', function(){
                //触发事件
                var active = {
                    test2: function(){
                        console.log($(this).data().id,"打印id")

                        // 获取id
                        var id=$(this).data().id

                        layer.confirm('您确定要删除吗？', {
                            btn: ['Yes','No'] //按钮
                        }, function(){
                            $.ajax({
                                url:'/shop/delGather',
                                type:'POST', //GET
                                async:true,    //或false,是否异步
                                data:{
                                    id:id,
                                },
                                timeout:5000,    //超时时间
                                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                                success:function(data){
                                    console.log(data);
                                    if (data.code=='000000'){
                                        window.location.reload();
                                        // 获得frame索引
                                    }else {
                                        data.code("删除失败");
                                    }
                                },
                                error:function(xhr,textStatus){
                                    console.log('错误')
                                    console.log(xhr)
                                    console.log(textStatus)
                                },
                                complete:function(){
                                    //console.log('结束')
                                }
                            })
                        }, function(){
                            // 事务回调
                        });
                    }
                };
                // 选择选项设定
                $('.layui-btn-danger').on('click', function(){
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });
        })
    </script>

效果如下图

在这里插入图片描述