做 php 难免会遇到弹框功能，很常见，也很多。。
今天 教大家一个万能弹框 layer 英文名字叫 拉页儿 ，英文只知道 24个字母的人 ，能 读出来已经很感谢 百度翻译了。
第一步 --- 引用文件
<script src="/Public/js/layer/layer-min.js"></script>
当然jquery你可以不引入，但是你不能用。。。
第二部 页面写个触发事件 ，比如我的
<a class="btn btn-primary" href="javascript:void(0);" οnclick="selectGoods()" ><i class="fa fa-search"></i>添加商品</a>
然后 script 里面这么写
// 选择商品 function selectGoods(){ var url = "{:U('Admin/Order/search_goods')}"; layer.open({ type: 2, //包括但不限于一个值 ，具体 可以去查看 2 就是URL title: '选择商品', shadeClose: true, //我觉着应该再加个onclick shade 遮罩层 Close 关闭 shade: 0.8, //遮罩层 透明度 area: ['60%', '60%'], //大小 content: url, //这个和type 有关系，比如type = 1 content=‘这里可以直接写’ }); }
这里我只是按照我做的 帮那些不能成功的同学走一下。 很多功能我都没有用到，不可以一一介绍。
复制的黑色背景是去不掉了日了够拉。
看 URL 这里 就已经调用layer 这个插件了， 然后 content 这里 获取 URL的返回值 ，我是返回的是一个页面看代码
/** * 选择搜索商品 */ public function search_goods() { //品牌列表 $brandList = M("brand")->select(); //商品分类 $categoryList = M("goods_category")->select(); $this->assign('categoryList', $categoryList); $this->assign('brandList', $brandList); $where = ' is_on_sale = 1 ';//搜索条件 I('intro') && $where = "$where and " . I('intro') . " = 1"; if (I('cat_id')) { $this->assign('cat_id', I('cat_id')); $grandson_ids = getCatGrandson(I('cat_id')); $where = " $where and cat_id in(" . implode(',', $grandson_ids) . ") "; // 初始化搜索条件 } if (I('brand_id')) { $this->assign('brand_id', I('brand_id')); $where = "$where and brand_id = " . I('brand_id'); // echo $where;die; } if (!empty($_REQUEST['keywords'])) { $this->assign('keywords', I('keywords')); $where = "$where and (goods_name like '%" . I('keywords') . "%' or keywords like '%" . I('keywords') . "%')"; } $goodsList = M('goods')->where($where)->order('goods_id DESC')->limit(10)->select(); // $result = M('goods')->getlastsql(); // var_dump($result);die; $this->assign('goodsList', $goodsList); $this->display(); }
我这里找的是 search_goods 页面 ， 页面 和普通页面没有什么区别
<include file="Public/addshop-base"/> <div class="wrapper"> <section class="content"> <div class="container-fluid"> <div class="panel panel-default"> <div class="panel-body"> <div class="navbar navbar-default"> <form action="{:U('Admin/Order/search_goods')}" id="search-form2" class="navbar-form form-inline" method="post"> <div class="form-group"> <select name="cat_id" id="cat_id" class="form-control"> <option value="">所有分类</option> <foreach name="categoryList" item="v" key="k" > <option value="{$v['id']}" <if condition="$v[id] eq $cat_id">selected</if> ><?php echo str_pad('',($v[level] * 5),'-',STR_PAD_LEFT); ?> {$v['name']}</option> </foreach> </select> </div> <div class="form-group"> <select name="brand_id" id="brand_id" class="form-control"> <option value="">所有品牌</option> <foreach name="brandList" item="v" key="k" > <option value="{$v['id']}" <if condition="$v[id] eq $brand_id">selected</if> >{$v['name']}</option> </foreach> </select> </div> <div class="form-group"> <select name="intro" class="form-control"> <option value="0">全部</option> <option value="is_new">新品</option> <option value="is_recommend">推荐</option> </select> </div> <div class="form-group"> <label class="control-label" for="input-order-id">关键词</label> <div class="input-group"> <input type="text" name="keywords" value="{$keywords}" placeholder="搜索词" id="input-order-id" class="form-control"> </div> </div> <button type="submit" id="button-filter search-order" class="btn btn-primary"><i class="fa fa-search"></i>查找</button> </form> </div> <div id="ajax_return"> <div class="table-responsive"> <table class="table table-bordered table-hover" id="goos_table"> <thead id="goods_thead"> <tr> <td class="text-left">商品名称</td> <td class="text-left">价格</td> <td class="text-left">库存</td> <td class="text-left">选择</td> <td class="text-left">操作</td> </tr> </thead> <tbody> <volist name="goodsList" id="list" > <!--如果有商品规格--> <if condition="$list['spec_goods'] neq null"> <volist name="list['spec_goods']" id="spec_goods"> <tr> <td class="text-left">{$list.goods_name|getSubstr=0,33} ( {$spec_goods[key_name]} )</td> <td class="text-left">{$spec_goods[price]}</td> <td class="text-left">{$spec_goods[store_count]}</td> <input type="hidden" name="goods_id[{$list.goods_id}][{$spec_goods[key]}][goods_num]" /> <td class="text-left"> <input type="checkbox"/> </td> <td><a href="javascript:void(0)" οnclick="javascript:$(this).parent().parent().remove();">删除</a></td> </tr> </volist> <else/> <tr> <td class="text-left">{$list.goods_name|getSubstr=0,33}</td> <td class="text-left">{$list.shop_price}</td> <td class="text-left">{$list.store_count}</td> <input type="hidden" name="goods_id[{$list.goods_id}][key][goods_num]"/> <td class="text-left"> <input type="checkbox"/> </td> <td><a href="javascript:void(0)" οnclick="javascript:$(this).parent().parent().remove();">删除</a></td> </tr> </if> </volist> <tr> <td class="text-right" colspan="5"> <a href="javascript:void(0)" οnclick="select_goods();" class="btn btn-info">确定</a> </td> </tr> </tbody> </table> </div> </div> </div> </div> </div> </section> <script> function select_goods() { if($("input[type='checkbox']:checked").length == 0) { layer.alert('请选择商品', {icon: 2}); //alert('请选择商品'); return false; } // 将没选中的复选框所在的 tr remove 然后删除复选框 $("input[type='checkbox']").each(function(){ if($(this).is(':checked') == false) { $(this).parent().parent().remove(); } $(this).siblings().show(); $(this).parent().remove(); }); $(".btn-info").remove(); javascript:window.parent.call_back($('#goos_table').html()); } </script> </div> </body> </html>
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
