layui彈窗
阿新 • • 發佈：2018-09-23
left success 顯示 lock head 提交 scrip con .data
<!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彈窗