zoukankan      html  css  js  c++  java
  • 关于layer.open() 弹框的使用

    在用 layer.open() 追加渲染HTML的时候,完全看不到效果,皆因layui框架需要在最后用 form.render() 方法来渲染表单才可以看到效果,写法如下:

    <script>
                    layui.use(['form','layer'],function(){
                    var form = layui.form;
                    var layer = layui.layer;
                
                    str = '<div class="layui-form layui-form-pane">';
                    str += "<label for='name' class='layui-form-label'>分类名称:</label><input maxlength=5 id='category_name' type='text' style='55%;height:36px;' value='"+ category_name +"'>";
                    str += '</div>';
                    var index = layer.open({
                        title:"编辑分类",
                        area:['325px'],
                        content:str,
                        btn:['确定','取消'],
                        yes:function(){
                            var name = $.trim($('#category_name').val());
                            $.post(
                                '/shopmenu/category_list',
                                {
                                    name:name,
                                    cid:cid, 
                                    type:3,
                                    is_must:must2
                                },
                                function(data){
                                    // console.log(data);return;
                                    var data = $.parseJSON(data);
                                    if(data.result){
                                        layer.msg("更改成功", {icon: 6, time:3000});
                                        location.href = "javascript:location.replace(location.href)";
                                    }else{
                                        layer.msg(data.msg, {icon: 7, time:3000});return;
                                    }
                                }
                            );
                        },
                        btn2:function(){
                            layer.closeAll(index); //关闭当前窗口
                        }
                    });
    
                    // 渲染表单
                    form.render();
                });
    </script>

    另外, layui框架弹窗的关闭方法走一波,,

    关闭当前layer.open()打开的弹窗:
    var index = layer.open({});//先赋值这个弹窗
    layer.closeAll(index);

    //关闭除父级外的子页面
    var index = parent.layer.getFrameIndex(window.name);
    parent.layer.close(index);//关闭当前页
    parent.location.reload();//刷新父级页面
    //window.parent.location.replace(location.href)//刷新父级页面
    
    其他的,
    layer.closeAll(); //疯狂模式,关闭所有层
    layer.closeAll('dialog'); //关闭信息框
    layer.closeAll('page'); //关闭所有页面层
    layer.closeAll('iframe'); //关闭所有的iframe层
    layer.closeAll('loading'); //关闭加载层
    layer.closeAll('tips'); //关闭所有的tips层 
  • 相关阅读:
    如何判断retina,如何判断设备的比例
    说说移动前端中 viewport (视口)
    随机生成广告
    fullPage 全屏滚动【上下滚动】效果
    判断鼠标滚动方向
    低版本IE浏览器 input元素出现叉叉的情况
    关于IE7 默认有边框的解决方案
    embed 层级太高
    搜狐-新闻页 粗略整理-自我学习
    页面重构布局样式命名规则 —— 参考
  • 原文地址:https://www.cnblogs.com/pyspang/p/9681953.html
Copyright © 2011-2022 走看看