layui弹出层点击多次弹出问题

 这个问题其实很好解决,只需要一个变量标记一下,这个页面是处于有弹出层还是处于没有弹出层的时候,首先设置一个变量flag = true;在点击触发事件的按钮之后,只有flag为true的时候才弹出,弹出成功之后将flag赋值为false并进行相关的逻辑,在点击右上角关闭按钮时,有一个回调函数 cancel,在这个回调函数中将flag的值赋值为true,那么在关闭弹出层之后又可以点击弹出,这样就做到了页面上面只能弹出一个弹出层,防止了多次弹出的问题。

这里,附上代码:

var flag = true;
        $(document).on('click','#adminprogram-addproblem',function(){
            if(flag){
                flag = false;
                admin.req({
                    url: ,
                    data: {},
                    done: function(res){
                        layui.use(['laytpl', 'layer'], function(){
                            var laytpl = layui.laytpl;
                            var layer = layui.layer;
                            laytpl($('#LAY-themeducation-adminprogram-qstproblem-tpl').html()).render(res, function(html){
                                layer.open({
                                    type:1,
                                    title: '列表',
                                    area: ['730px','600px'],
                                    content: html,
                                    success: function () {
                                        table.render({
                                            elem: '#chooseproblem'
                                            ,url:
                                            ,id:'chooseproblem'
                                            ,cols: [[
                                                {field:'',title: '选择',width:100,templet: '#problem-tpl'}
                                                ,{field:'ptitle',title: '问题标题',width:150}
                                                ,{field:'type',title: '问题类型',width:120}
                                                ,{field:'score',title: '初始积分',width:120}
                                                ,{field:'yxnum',title: '已选次数',width:120}
                                                ,{field:'pimgurl',title: '图片',templet:'#tpimgurl',width:110}
                                            ]]
                                        });
                                    },
                                    cancel: function () {
                                        flag = true;
                                    }
                                });
                            });
                        });
                    }
                });
            }
        });

 

你可能感兴趣的:(前框框架使用)