layui弹窗
Posted sunhao1987
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了layui弹窗相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="public/layui/css/layui.css"/> <script src="0613/public/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="public/layui/layui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <span class="site-demo-button" id="layerDemo"> <button class=‘layui-btn layui-btn-radius layui-btn-warm‘ data-method="notice">添加</button> </span> </body> </html> <script type="text/javascript"> layui.use(‘layer‘, function(){ //独立版的layer无需执行这一句 var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句 }); var active = { notice: function(){ //示范一个公告层 layer.open({ type: 2 ,title: false //不显示标题栏 ,closeBtn: false ,area: [‘600px‘] ,shade: 0.8 ,id: ‘LAY_layuipro‘ //设定一个id,防止重复弹出 ,btn: [‘提交‘, ‘返回‘] ,btnAlign: ‘c‘ ,moveType: 1 //拖拽模式,0或者1 ,content: ‘ad.php‘ ,success: function(layero,index){ var btn = layero.find(‘.layui-layer-btn‘); btn.find(‘.layui-layer-btn0‘).click(function(){ var body = layer.getChildFrame(‘body‘, index); var iframeWin = window[layero.find(‘iframe‘)[0][‘name‘]]; //得到iframe页的窗口对象,执行iframe页的方法:iframeWin.method(); var zh = body.find(‘#zh‘).val(); console.log(bj); console.log(zh); console.log(xm); console.log(mm); }); } }); } } $(‘#layerDemo .layui-btn‘).on(‘click‘, function(){ var othis = $(this), method = othis.data(‘method‘); active[method] ? active[method].call(this, othis) : ‘‘; }); </script>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" type="text/css" href="public/layui/css/layui.css"/> <script src="0613/public/jquery/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script> <script src="public/layui/layui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <form class=‘layui-form‘> <div class=‘layui-form-item‘> <label class=‘layui-form-label‘ style=‘width:100px;‘ id=‘inp‘>请输入角色名:</label> <div class=‘layui-input-block‘> <input type=‘text‘ name=‘title‘ class=‘layui-input‘ style=‘width:200px;margin-left:20px;margin-top:12px‘> </div> <div class=‘layui-form-item‘ style=‘margin-top:12px‘> <label class=‘layui-form-label‘>请选择功能:</label> <div class=‘layui-input-block‘> <input type=‘checkbox‘ title=‘写作‘> <input type=‘checkbox‘ title=‘阅读‘> <input type=‘checkbox‘ title=‘游戏‘> <input type=‘checkbox‘ title=‘写作‘> <input type=‘checkbox‘ title=‘阅读‘> <input type=‘checkbox‘ title=‘游戏‘> <input type=‘checkbox‘ title=‘游戏‘> <input type=‘checkbox‘ title=‘游戏‘> <input type=‘checkbox‘ title=‘游戏‘> </div> </div> </form> </body> </html> <script type="text/javascript"> layui.use(‘form‘, function(){ var form = layui.form; }); </script>
以上是关于layui弹窗的主要内容,如果未能解决你的问题,请参考以下文章