精华内容
下载资源
问答
  • 今天小编就为大家分享一篇快速解决layui弹窗按enter键不停弹窗的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 本篇文章主要介绍了ayui弹窗父子窗口之间传参数的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 测试48种layui弹窗 <div class="layui-fluid" id="LAY-component-layer-list"> <div class="layui-row layui-col-space15"> <div class="layui-col-md12"> <div class="layui-card demo-...

    测试48种layui弹窗

    <div class="layui-fluid" id="LAY-component-layer-list">
        <div class="layui-row layui-col-space15">
          <div class="layui-col-md12">
            <div class="layui-card demo-component-layer" style="display: block;">
              <div class="layui-card-header">弹层之美</div>
              <div class="layui-card-body">
                
                <blockquote class="layui-elem-quote">
                  layer  layui 中最广为人知的组件,它可以轻松应对 Web 应用开发中的各类复杂的弹出交互。有人说使用 layer 是一种情怀,一旦用上了,就离不开了。有多少人是因为 layer 才选择 layui 的呢,有一种信仰,叫:无条件相信
                </blockquote>
                
              </div>
            </div>
            
            <div class="layui-card">
              <div class="layui-card-header">弹层类型</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test1">Alert</button>
                  <button class="layui-btn layui-btn-primary" data-type="test2">Confirm</button>
                  <button class="layui-btn layui-btn-primary" data-type="test3">Msg</button>
                  <button class="layui-btn layui-btn-primary" data-type="test4">Tips</button>
                  <button class="layui-btn layui-btn-primary" data-type="test5">Page</button>
                  <button class="layui-btn layui-btn-primary" data-type="test6">Iframe</button>
                  <button class="layui-btn layui-btn-primary" data-type="test7">Prompt</button>
                  <button class="layui-btn layui-btn-primary" data-type="test8">Tab</button>
                  <button class="layui-btn layui-btn-primary" data-type="test9">Photos</button>
                </div>
                
              </div>
            </div>
            <div class="layui-card">
              <div class="layui-card-header">常规使用</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test10">信息框</button>
                  <button class="layui-btn layui-btn-primary" data-type="test11">询问层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test12">提示层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test13">墨绿深蓝风</button>
                  <button class="layui-btn layui-btn-primary" data-type="test14">捕获页</button>
                  <button class="layui-btn layui-btn-primary" data-type="test15">页面层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test16">自定风格</button>
                  <button class="layui-btn layui-btn-primary" data-type="test17">tips层1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test18">tips层2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test19">iframe层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test20">iframe窗</button>
                  <button class="layui-btn layui-btn-primary" data-type="test21">加载层1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test22">加载层2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test23">prompt层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test8">tab层</button>
                  <button class="layui-btn layui-btn-primary" data-type="test9">相册层</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">信息框</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test26">1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test27">2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test28">3</button>
                  <button class="layui-btn layui-btn-primary" data-type="test29">4</button>
                  <button class="layui-btn layui-btn-primary" data-type="test30">5</button>
                  <button class="layui-btn layui-btn-primary" data-type="test31">6</button>
    
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">页面层与iframe层</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test33">自定义页面</button>
                  <button class="layui-btn layui-btn-primary" data-type="test35" id="LAY_layer_iframe_demo">iframe父子通讯</button>
                  <button class="layui-btn layui-btn-primary" data-type="test36">禁止iframe滚动条</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">加载层</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test37">风格1</button>
                  <button class="layui-btn layui-btn-primary" data-type="test38">风格2</button>
                  <button class="layui-btn layui-btn-primary" data-type="test39">风格3</button>
                  <button class="layui-btn layui-btn-primary" data-type="test40">风格4</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">tips层</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test41">显示在上</button>
                  <button class="layui-btn layui-btn-primary" data-type="test42">显示在右</button>
                  <button class="layui-btn layui-btn-primary" data-type="test43">显示在下</button>
                  <button class="layui-btn layui-btn-primary" data-type="test44">显示在左</button>
                  <button class="layui-btn layui-btn-primary" data-type="test45">不销毁上一个tips</button>
                </div>
                
              </div>
            </div>
          </div>
          <div class="layui-col-md12">
            <div class="layui-card">
              <div class="layui-card-header">其它示例</div>
              <div class="layui-card-body">
                
                <div class="layui-btn-container layadmin-layer-demo">
                  <button class="layui-btn layui-btn-primary" data-type="test47">最大化弹出</button>
                  <button class="layui-btn layui-btn-primary" data-type="test48">显示在正上方</button>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    
     var active = {
                    test1: function () {
                        layer.alert('你好,体验者');
                    }
                    , test2: function () {
                        layer.confirm('您是如何看待前端开发?', {
                            btn: ['重要', '奇葩'] //按钮
                        }, function () {
                            layer.msg('的确很重要', { icon: 1 });
                        }, function () {
                            layer.msg('也可以这样', {
                                time: 20000, //20s后自动关闭
                                btn: ['明白了', '知道了']
                            });
                        });
                    }
                    , test3: function () {
                        layer.msg('玩命提示中');
                    }
                    , test4: function () {
                        layer.tips('Hi,我是一个提示', this, { tips: 1 });
                    }
                    , test5: function () {
                        layer.open({
                            title: '页面层'
                            , type: 1
                            //,skin: 'layui-layer-rim'
                            , shadeClose: true
                            , area: admin.screen() < 2 ? ['80%', '300px'] : ['700px', '500px']
                            , content: '<div style="padding: 20px;">放入任意HTML</div>'
                        });
                    }
                    , test6: function () {
                        layer.open({
                            type: 2
                            , content: 'http://fly.layui.com/'
                            , shadeClose: true
                            , area: admin.screen() < 2 ? ['100%', '80%'] : ['375px', '500px']
                            , maxmin: true
                        });
                    }
                    , test7: function () {
                        layer.prompt({ title: '输入任何口令,并确认', formType: 1 }, function (pass, index) {
                            layer.close(index);
                            layer.prompt({ title: '随便写点啥,并确认', formType: 2 }, function (text, index) {
                                layer.close(index);
                                layer.msg('演示完毕!您的口令:' + pass + '<br>您最后写下了:' + text);
                            });
                        });
                    }
                    , test8: function () {
                        layer.tab({
                            area: admin.screen() < 2 ? ['100%', '80%'] : ['600px', '300px'],
                            tab: [{
                                title: 'TAB1',
                                content: '<div style="padding:20px;">内容1</div>'
                            }, {
                                title: 'TAB2',
                                content: '<div style="padding:20px;">内容2</div>'
                            }]
                        });
                    }
                    , test9: function () {
                        $.getJSON(layui.setter.base + 'json/layer/photos.js', function (json) {
                            layer.photos({
                                photos: json //格式见API文档手册页
                            });
                        });
                    }
                    , test10: function () {
                        var icon = -1;
                        (function changeIcon() {
                            var index = layer.alert('Hi,你好! 点击确认更换图标', {
                                icon: icon,
                                shadeClose: true,
                                title: icon === -1 ? '初体验 - layer ' + layer.v : 'icon:' + icon + ' - layer ' + layer.v
                            }, changeIcon);
                            if (8 === ++icon) layer.close(index);
                        }());
                    }
                    , test11: function () {
                        layer.confirm('真的吗?', function (index) {
                            layer.msg('哦')
                            layer.close(index);
                        });
                    }
                    , test12: function () {
                        layer.msg('玩了命提示中');
                    }
                    , test13: function () {
                        //墨绿深蓝风
                        layer.alert('墨绿风格,点击确认看深蓝', {
                            skin: 'layui-layer-molv'
                            , closeBtn: 0
                        }, function () {
                            layer.alert('偶吧深蓝style', {
                                skin: 'layui-layer-lan'
                                , closeBtn: 0
                                , anim: 4
                            });
                        });
                    }
                    , test14: function () {
                        layer.open({
                            type: 1,
                            shade: false,
                            title: false,
                            content: $('.demo-component-layer'),
                            cancel: function () {
                                setTimeout(function () {
                                    layer.tips('捕获就是从页面已经存在的元素上,包裹 layer 的结构,从而弹出显示。是不是比较好玩呢?', '.demo-component-layer', {
                                        tips: 3, time: 5000
                                    });
                                }, 300);
                            }
                        });
                    }
                    , test15: function () {
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-rim',
                            area: ['420px', '240px'],
                            content: '<div style="padding: 10px;">任意html内容</div>'
                        });
                    }
                    , test16: function () {
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-admin',
                            closeBtn: false,
                            area: '350px',
                            anim: 5,
                            shadeClose: true,
                            content: '<div style="padding:20px;">即传入skin:"样式名",然后你就可以为所欲为了。你怎么样给她整容都行</div>'
                        });
                    }
                    , test17: function () {
                        layer.tips('Hi,我是tips', this, {
                            tips: 1
                        });
                    }
                    , test18: function () {
                        layer.tips('我是另外一个tips,只不过我长得跟之前那位稍有些不一样。', this, {
                            tips: [3, '#2F9688'],
                            time: 4000
                        });
                    }
                    , test19: function () {
                        layer.open({
                            type: 2,
                            title: '贤心博客',
                            shadeClose: true,
                            shade: 0.8,
                            area: ['375px', '500px'],
                            content: 'http://www.layui.com/'
                        });
                    }
                    , test20: function () {
                        layer.open({
                            type: 2,
                            title: '百度一下',
                            shade: false,
                            maxmin: true,
                            area: ['90%', '90%'],
                            content: 'http://www.baidu.com/'
                        });
                    }
                    , test21: function () {
                        var ii = layer.load(0, { shade: false });
                        setTimeout(function () {
                            layer.close(ii)
                        }, 3000);
                    }
                    , test22: function () {
                        var iii = layer.load(1, {
                            shade: [0.1, '#fff']
                        });
                        setTimeout(function () {
                            layer.close(iii)
                        }, 3000);
                    }
                    , test23: function () {
                        layer.prompt({ title: '写点什么吧' }, function (value, index) {
                            layer.msg('你写下了:' + value, {
                                icon: 6
                                , shade: 0.9
                            }, function () {
                                layer.close(index);
                            });
                        });
                    }
    
                    , test26: function () {
                        layer.alert('见到你真的很高兴', { icon: 6 });
                    }
                    , test27: function () {
                        layer.msg('你确定你很帅么?', {
                            time: 0 //不自动关闭
                            , btn: ['必须啊', '丑到爆']
                            , yes: function (index) {
                                layer.close(index);
                                layer.msg('雅蠛蝶 O.o', {
                                    icon: 6
                                    , time: 0
                                    , btn: ['嗷', '嗷', '嗷']
                                });
                            }
                        });
                    }
                    , test28: function () {
                        layer.msg('这是最常用的吧');
                    }
                    , test29: function () {
                        layer.msg('并不十分开心。。', { icon: 5 });
                    }
                    , test30: function () {
                        layer.msg('玩命卖萌中', function () {
                            layer.msg('卖完了');
                        });
                    }
                    , test31: function () {
                        layer.confirm('真的删除吗?', function () {
                            layer.msg('正在删除', { icon: 16 }, function () {
                                layer.msg('成功删除', { icon: 1 })
                            });
                        });
                    }
    
                    , test33: function () {
                        layer.open({
                            type: 1,
                            title: false,
                            closeBtn: 0,
                            shadeClose: true,
                            skin: 'yourClass',
                            content: '<div style="padding: 20px; width: 260px; height: 180px;">自定义HTML内容</div>'
                        });
                    }
    
                    , test35: function () {
                        layer.open({
                            type: 2,
                            area: ['700px', '450px'],
                            fixed: false,
                            maxmin: true,
                            content: '../../iframe/layer/iframe.html'
                        });
                    }
                    , test36: function () {
                        layer.open({
                            type: 2,
                            area: ['360px', '500px'],
                            skin: 'layui-layer-rim',
                            content: ['http://www.layui.com/', 'no']
                        });
                    }
                    , test37: function () {
                        layer.load();
                        setTimeout(function () {
                            layer.closeAll('loading');
                        }, 2000);
                    }
                    , test38: function () {
                        layer.load(1);
                        setTimeout(function () {
                            layer.closeAll('loading');
                        }, 2000);
                    }
                    , test39: function () {
                        layer.load(2);
                        setTimeout(function () {
                            layer.closeAll('loading');
                        }, 2000);
                    }
                    , test40: function () {
                        layer.msg('加载中', {
                            icon: 16
                            , shade: 0.01
                        });
                    }
                    , test41: function () {
                        layer.tips('上', this, {
                            tips: [1, '#000']
                        });
                    }
                    , test42: function () {
                        layer.tips('默认就是向右的,3秒后关闭', this);
                    }
                    , test43: function () {
                        layer.tips('下', this, {
                            tips: 3
                        });
                    }
                    , test44: function () {
                        layer.tips('在很久很久以前,在很久很久以前,在很久很久以前……', this, {
                            tips: [4, '#78BA32']
                        });
                    }
                    , test45: function () {
                        layer.tips('不会销毁之前的', this, { tipsMore: true });
                    }
    
                    , test47: function () {
                        var index = layer.open({
                            type: 2,
                            content: 'http://baidu.com',
                            area: ['300px', '300px'],
                            maxmin: true
                        });
                        layer.full(index);
                    }
                    , test48: function () {
                        layer.msg('灵活运用 offset', {
                            offset: 't',
                            anim: 6
                        });
                    }
                };
    

    调用:

      $('#LAY-component-layer-list .layadmin-layer-demo .layui-btn').on('click', function () {
                    var type = $(this).data('type');
                    active[type] && active[type].call(this);
                });
    
    展开全文
  • Layui弹窗中使用下拉框,当显示选项时,弹窗会出现滚动条。 解决方案:给弹窗加上:overflow:visible,即可解决该问题。

    Layui弹窗中使用下拉框,当显示选项时,弹窗会出现滚动条。

    解决方案:给弹窗加上:overflow:visible,即可解决该问题。

    展开全文
  • layUI弹窗,layUI复选框

    2019-11-22 17:41:22
    layUI弹窗,layUI复选框 layUI弹窗 $("#close1").click(function() { parent.layer.open({ type : 1, title : '提示', content : '<div style="text-align:center;line-height:100px;...

    layUI弹窗,layUI复选框

    layUI弹窗

    $("#close1").click(function() {
    		parent.layer.open({
    							type : 1,
    							title : '提示',
    							content : '<div style="text-align:center;line-height:100px;height:100px;"><i class="layui-icon" style="font-size: 22px; color: #40C7DA;">&#xe702;</i> '
    							+ '是否一键关闭'+name+'等教室的所有设备!</div>',
    							area : [ '800px','200px' ],
    							btn : [ '确定', '取消' ],
    							yes : function(index,layero) {
    								if(opt=="教室总览"){
    									allSend(2,mapColor,2);
    									mapColor ={};
    									//设置class="classroomColor"的背景色
    									$(".classroomColor").css("backgroundColor","rgb(230, 230, 230)");
    								}else if(opt=="教室列表"){
    									allSend(2,mapClassroomid,1);
    									mapClassroomid={};
    									
    								}else{
    									
    								}
    								//关闭所有的弹窗
    								parent.layer.closeAll();
    							}
    						})
    
    				});
    

    获取LayUI table中复选框选中的所有对象

    layui.use(['table'],function(){
    				var table = layui.table;
    				//通过layUI获取复选框对应的数据,其中devicetable表示table的ID,checkDatas 表示获取的对象
    				checkDatas = table.checkStatus('devicetable');
    				
    			})
    

    LayUI table 重载

    layui.use(['table'],function(){
        					var table = layui.table;
        					//重新加载id为devicetable,这样可以关闭所有的复选框
        					table.reload('devicetable');
        				})
    
    展开全文
  • layui弹窗提示模板

    2020-08-04 15:47:35
    <script src=... layui.use('layer', function() { var layer = layui.layer ; layer.msg('此为演示站点,如需搭建,请联系唯一QQ:316152315'); }); </script>
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
    <script type="text/javascript">
        layui.use('layer', function() {
          var layer = layui.layer ; 
          layer.msg('此为演示站点,如需搭建,请联系唯一QQ:316152315');
        });
    </script>
    
    展开全文
  • layui 弹窗表单赋值

    千次阅读 2020-08-13 11:22:18
    layui官方示例 HTML代码 <form class="layui-form hide" action="" lay-filter="example" id="edit_content"> <div class="layui-form-item"> <label class="layui-form-label">用户编号:&...
  • <p>layui版本layui-v2.5.6 <p style="text-align:center"><img alt="" height="96" src="https://img-ask.csdnimg.cn/upload/1606965464950.png" width="969" /></p> 按百度说的removeClass('layer-anim')...
  • 试了网上说的layui-layout-body 的overflow属性不生效
  • vue使用layui弹窗

    千次阅读 2020-03-25 18:29:26
    vue-layer弹框插件 安装 npm i --save vue-layer 引用 import layer from 'vue-layer' Vue.prototype.$layer = layer(Vue);... type: 0, //0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层) ...
  • 我想在layer出现前刷新下网页, ``` //window.location.href = "?comp="+text; window.history.pushState("","","?comp="+text);... ,offset: type //具体配置...如上,这么写刷新的时候把弹窗也刷没了,该怎么解决啊
  • layer.open({ type: 2, title: '修改维护', shade: [0.6], area: ['600px', '800px'], btn: ['确认', '取消'], anim: 2, content: ['/frame/view/toProcess.html', 'no'], yes:...
  • layui弹窗被遮罩成灰色,无法操作的问题只需要添加shade:0属性 只需要添加shade:0属性
  • 1.父界面向子界面传值  [1].父界面打开子界面: function show_layer(){ layer.open({ type: 2, area: [w+'px', h +'px'], fix: false, //不固定 maxmin: true, shadeClose: true, ... content: url,
  • layui弹窗关闭

    千次阅读 2019-01-08 10:46:30
    layui弹窗关闭 关闭子页面,刷新父页面 layer.close(layer.index); window.parent.location.reload(); 关闭弹窗 先获取某个弹出层的 index var index = layer.open(); var index = layer.alert(); var index...
  • layui弹窗在触发打开时其弹窗的zindex会根据点击次数不断...可以通过修改layui文件中layui.all.js的代码来实现固定弹窗z-index,防止影响百度富文本的弹窗被layui弹窗遮挡。 将源代码中的s值改为s=r.zIndex+1即可 ...
  • layui 弹窗动态加载数据表格table

    千次阅读 2020-07-27 18:58:38
    " class="layui-table-link" style="display: inline-block; width: 100%;" onclick="symptomEdit('{{d.symptomId}}')">点击弹窗数据表格</a> </script> <!--症状对应分类弹窗--&
  • Layui 弹窗 回车执行确定按钮事件

    千次阅读 2020-08-03 11:20:56
    实现按 Enter 键关闭弹窗 layer.open({ type: 1, content: 'Where is the love?', btn: ['确定'], success: function(layero, index){ this.enterConfirm = function(event){ if(event.keyCode === 13){ $(...
  • layui 弹窗实现文件上传

    千次阅读 2020-04-01 18:51:01
    html界面(主界面隐藏,弹窗中显示) <div id="file_upload_div" style="display: none" class="text-center"> <div class="layui-upload-drag" id="test10"> <i class="layui-icon"></i>...
  • layui弹窗增加换行

    2020-03-22 17:36:57
    加<br>标签即可,如 layer.alert("借用理由:"+data.borrow_introduction+"<br>"+"回复内容:"+data.borrow_reply_content);
  • layui弹窗iframe获取值

    千次阅读 2020-03-21 23:16:11
    弹出弹窗的页面: layer.open({ type: 2, skin : "layui-layer-lan", title:"新增权限",//标题 area: ['460px', '500px'], ...
  • 在使用layer.alert layer.confirm layer.msg 等等弹窗时,发现看不到弹窗,然后通过控制台检查代码发现,如图 弹窗其实已经被创建了,但是跑到了视窗之外。 如何解决: 如果出现这种现象,百分之八十的可能就是...
  • 使用layUi前端框架,弹窗时,关闭按钮不固定,不在右上角展示,原因是少了一个div 结尾
  • 最近遇到了一个问题:LayUI弹出子窗口后,提交更新表单后后台数据已经发生改变,但是回到父页面后,数据表格却一直不更新,只有重新进入该页面才会重新发请求拿到新的数据,这个Bug花了我一整天时间来解决。...
  • layui弹窗不显示文字导致原因+解决

    千次阅读 2020-04-12 16:06:08
    ##layui弹窗不显示文字导致原因+解决 ###原因 这里我遇到的是ajax上传时候没有设置 dataType:‘json’ dataType设置服务器返回数据格式 ###解决 1:设置返回数据格式 例如: dataType:‘json’ [见下方图1] 2:拼接...
  • 今天小编就为大家分享一篇layui弹窗 form表单赋值的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Layui 弹窗 -全面使用

    万次阅读 2019-09-15 21:31:09
    类型:String/DOM/Boolean,默认:'.layui-layer-title',即默认是触发标题区域拖拽。 如果你想单独定义,指向元素的选择器或者DOM即可。如 move: '.mine-move' 。 还可以配置设定 move: false 来禁止拖拽 ...
  • parent.layer.close(parent.layer.getFrameIndex(window.name)); //关闭父级窗 parent.layer.tips('更新成功,请手动重启服务后修改生效!', '#servRestart'); parent.layer.msg("ddddd!......
  • layui弹窗父子页面传值

    千次阅读 2020-01-15 17:27:09
    在弹框成功后获取写在子页面的...根据layui文档 layer.open({ type: 2, content: ‘test/iframe.html’, success: function(layero, index){ var body = layer.getChildFrame(‘body’, index); var iframeWin = win...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,995
精华内容 1,598
关键字:

layui弹窗