layer的弹出层的简单的例子

来源：互联网发布：肩膀酸痛知乎编辑：程序博客网时间：2024/04/29 12:40

如果不了级的基本的清楚官网查看api网址为

http://layer.layui.com/

我用的是iframe

/!* 如果是iframe层 */layer.open({  type: 2,   content: 'http://sentsin.com' //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']});

样式如图：

在js中写函数如

function option_add_new(element,id,restaurant_id){
   var count = $(element).next().text();
   layer.open({
       type: 2,
       title: false,
       area: ['430px', '500px'],
       maxmin: false,
       closeBtn: 1,
       content: '../productProperty/optionnew.do?id='+id+'&shop_id='+restaurant_id
   });
}

他跳转到一个controller，controller代码如下

@RequestMapping("/optionnew")
   public String getProperty(String id,String shop_id,HttpServletResponse response,HttpServletRequest request) throws Exception{
       List<OmsProductProperty> omsProductProperties=productPropertyService.selectOne(Integer.parseInt(id));
       //StringBuffer sbf=new StringBuffer();
       System.out.println("hello,com ");
       OmsProductProperty omsProductProperty=productPropertyService.selectByPrimaryKey(omsProductProperties.get(0).getOppId());
       OmsProduct omsProduct=productService.selectByPrimaryKey(omsProductProperty.getOmsProduct().getOpId());
       request.getSession().setAttribute("listproductproperty", omsProductProperties);
       request.getSession().setAttribute("producttan",omsProduct );
       return "/front/property.jsp";
   }

吧结果页面返回给iframe 结果页面代码如下

<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no">
    <link rel="shortcut icon" href="/static/favicon.ico" type="images/x-icon">
    <link href="../page/shop/css/meituan.css" rel="stylesheet">
    <link href="../page/shop/css/bootstrap.min.css" rel="stylesheet">
    <link href="../page/shop/css/normalize.css" rel="stylesheet">
    <link href="../page/shop/css/main.css" rel="stylesheet">
    <script src="../page/shop/js/jquery-1.11.1.min.js"></script>
    <script src="../page/shop/js/bootstrap.min.js"></script>
    <script src="../page/shop/js/global.js"></script>
    <script src="../page/shop/js/common.js"></script>
<style type="text/css">
    .title{height:50px;width:100%;background:#ededed;border:1px solid #e1e0e0;color:#363636;line-height:50px;padding-left:30px;font-size:20px;}
    .category_head {
        height: 40px;
        text-align: center;
        background: #93cd4a;
        line-height: 40px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        padding: 0 30px;
    }
</style>
<title>DiDi</title>
</head>
<body>
   <div class="title" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
       ${sessionScope.producttan.opName}
       <span style="padding-left: 1px; color: #555; font-size: 15px;">（菜品选项）</span>
   </div>

   <div style="margin-bottom: 70px;" id="content">
       <c:forEach items="${sessionScope.listproductproperty }" var="property" varStatus="status">

           <div class="category_head" id="">
                           <span>${property.oppName}</span> <span style="font-size: 12px;"> (必选) </span>
                       </div>
           <div class="caipin" id="caipin_662">
               <table class="table order-list" style="margin-bottom: 0;">
                   <tbody>

                           <c:forEach items="${fn:split(property.oppMeasure, '/') }" var="ss" varStatus="statu">
                               <tr>
                                   <td width="1%"></td>
                                   <td class="order-name" width="45%">
                                       <span class="ct-food-title"><c:out value="${ss}" /></span>
                                   </td>
                                   <c:forEach items="${fn:split(property.oppPrice, '/') }" var="sss" varStatus="status">
                                       <c:if test="${statu.count==status.count }">
                                           <td class="order-price" width="23%">
                                           <span
                                           class="price left ct-food-rate"> $<c:out value="${sss}" /> </span>
                                       </td>

                                       <td class="order-count" id="food2_663" width="30%">

                                       <input
                                           name="662" value="663_<c:out value='${sss}' />" class="right"
                                           style="margin-right: 10px;" onclick="check(this)" type="radio">
                                       </td>
                                       <td width="1%"></td>
                                       </c:if>

                                   </c:forEach>

                               </tr>
                           </c:forEach>
                   </tbody>
               </table>
           </div>
       </c:forEach>


       

   <c:forEach items="${sessionScope.listproductproperty }" var="property" varStatus="status">
       <div class="caipin" style="display: none;">
               <table class="table order-list" style="margin-bottom: 0;">
                   <tbody>
                           <c:forEach items="${fn:split(property.oppMeasure, '/') }" var="ss" varStatus="statu">
                               <tr>
                                   <td width="1%"></td>
                                   <td class="order-name" width="45%">
                                       <span class="ct-food-title"><c:out value="${ss}" /></span>
                                   </td>
                                   <c:forEach items="${fn:split(property.oppPrice, '/') }" var="sss" varStatus="status">
                                       <c:if test="${statu.count==status.count }">
                                           <td class="order-price" width="23%">
                                           <span
                                           class="price left ct-food-rate"> $<c:out value="${sss}" /> </span>
                                       </td>
                                       </c:if>

                                   </c:forEach>
                                       <td class="order-count" id="food2_663" width="30%"><img
                           alt="" src="../page/shop/images/plus.png" class="right pointer"
                           onclick="add(this, <c:out value='${property.oppId }' />)"> <span class="right count "
                           style="padding: 0 7px;"></span> <img alt=""
                           src="../page/shop/images/minus.png" class="right pointer minus hide"
                           onclick="minus(this, <c:out value='${property.oppId }' />)"></td>
                       <td width="1%"></td>
                               </tr>
                           </c:forEach>
                   </tbody>
               </table>
           </div>
       </c:forEach>

       
       
       
       

   </div>

   <div
       style="position: fixed; bottom: 70px; min-height: 45px; line-height: 45px; width: 100%; background: #ededed; border-top: 1px solid #cdcdcd;">
       <table class="table order-list" style="margin-bottom: 0;">
           <tbody>
               <tr>
                   <td width="1%"></td>
                   <td class="order-name"><span class="ct-food-title">${sessionScope.producttan.opName}</span>
                   </td>
                   <td class="order-price" width="23%"><span
                       class="price left ct-food-rate">$ ${sessionScope.producttan.opPrice }</span></td>
                   <td class="order-count" id="food2_18122" width="30%"><img
                       alt="" src="../page/shop/images/plus.png" class="right pointer"
                       onclick="add_food(this, <c:out value='${sessionScope.producttan.opId }' />)"> <span class="right count"
                       style="padding: 0 7px;">1</span> <img alt=""
                       src="../page/shop/images/minus.png" class="right pointer minus"
                       onclick="minus_food(this, <c:out value='${sessionScope.producttan.opId }' />)"></td>
                   <td width="1%"></td>
               </tr>
           </tbody>
       </table>
   </div>
   <div
       style="position: fixed; bottom: 0px; height: 70px; width: 100%; background: #fff; border-top: 1px solid #cdcdcd;">
       <span
           style="color: #ff8c00; font-size: 20px; line-height: 70px; margin-left: 20px;"
           id="show_total">合计：$${sessionScope.producttan.opPrice }</span>
       <button
           style="background: url('../page/shop/images/button_orange.png'); height: 50px; width: 131px; border: none; margin: 10px 32px 0 0; font-size: 20px; color: #fff; float: right;"
           onclick="submit_option()">添加</button>
   </div>


   <div id="option_info" style="display: none; margin-bottom: 300px;">
       <input id="slt_radio_total" value="0" type="">
       <form id="form">

           <input name="option_total" id="option_total" value="<c:out value='${sessionScope.producttan.opPrice }' />"
               type="hidden">
           <input name="food_id" value="18122"
               type="hidden">
           <input name="food_name" value="<c:out value='${sessionScope.producttan.opName }' />"
               type="hidden">
           <input name="restaurant_id" value="175"
               type="hidden">
           <input name="food_quantity"
               id="food_quantity" value="1" type="hidden">
       </form>
   </div>

   <script type="text/javascript">
       //添加
       function add(element, option_id) {
           var count = $(element).parent().find('.count').text();
           var food_rate_str = $(element).parent().parent().find(
                   ".ct-food-rate").text();
           var food_rate = food_rate_str.replace("$ ", "");
           var single_rate = food_rate;
           if (single_rate == '') {
               single_rate = 0;
           }

           if ("" == count) {
               $(element).next().removeClass("hide");

               $(element).next().text(1);
               $(element).next().next().removeClass("hide");
               $(element).parent().prev().find("img").removeClass("hide");
           } else {
               $(element).next().text(parseInt(count) + 1);
           }
           var old_total = parseFloat($('#option_total').val());
           var total = old_total + parseFloat(single_rate);
           total = parseFloat(total).toFixed(2);
           $('#show_total').text('合计：$' + total);
           $('#option_total').val(total);
           if ("" == count) {
               var quantity = 1;
           } else {
               var quantity = parseInt(count) + 1;
           }

           if ($("#option_id_" + option_id).length > 0) {
               $("#option_id_" + option_id).val(quantity + '_' + single_rate);
           } else {
               var input_html = '<input type="text" name="option_id_'+option_id+'" id="option_id_'+option_id+'" value="1_'+single_rate+'">';
               $('#form').append(input_html);
           }

       }

       //减少
       function minus(element, option_id) {
           var count = $(element).prev().text();
           var count = $(element).parent().find('.count').text();
           var food_rate_str = $(element).parent().parent().find(
                   ".ct-food-rate").text();
           var food_rate = food_rate_str.replace("$ ", "");
           var single_rate = food_rate;
           if (single_rate == '') {
               single_rate = 0;
           }
           if ("1" == count) {
               $(element).prev().text("");
               $(element).prev().addClass("hide");
               $(element).addClass("hide");
               $(element).parent().prev().find("img").addClass("hide");
               $("#option_id_" + option_id).remove();
           } else {
               $(element).prev().text(parseInt(count) - 1);
               var quantity = parseInt(count) - 1;
               $("#option_id_" + option_id).val(quantity + '_' + single_rate);
           }
           var old_total = parseFloat($('#option_total').val());
           var total = old_total - parseFloat(single_rate);
           total = parseFloat(total).toFixed(2);
           $('#show_total').text('合计：$' + total);
           $('#option_total').val(total);
       }

       function add_food(element, food_id) {
           var count = $(element).parent().find('.count').text();
           var food_rate_str = $(element).parent().parent().find(
                   ".ct-food-rate").text();
           var food_rate = food_rate_str.replace("$ ", "");
           var single_rate = food_rate;
           if (single_rate == '') {
               single_rate = 0;
           }

           if ("" == count) {
               $(element).next().removeClass("hide");
               $(element).next().text(1);
               $(element).next().next().removeClass("hide");
               $(element).parent().prev().find("img").removeClass("hide");
               var quantity = 1;
           } else {
               $(element).next().text(parseInt(count) + 1);
               var quantity = parseInt(count) + 1;
           }
           var old_total = parseFloat($('#option_total').val());
           var total = old_total + parseFloat(single_rate);
           total = parseFloat(total).toFixed(2);
           $('#show_total').text('合计：$' + total);
           $('#option_total').val(total);
           $('#food_quantity').val(quantity);

       }

       function minus_food(element, food_id) {
           var count = $(element).prev().text();
           var count = $(element).parent().find('.count').text();
           var food_rate_str = $(element).parent().parent().find(
                   ".ct-food-rate").text();
           var food_rate = food_rate_str.replace("$ ", "");
           var single_rate = food_rate;
           if (single_rate == '') {
               single_rate = 0;
           }
           if ("1" == count) {
               $(element).prev().text("");
               $(element).prev().addClass("hide");
               $(element).addClass("hide");
               $(element).parent().prev().find("img").addClass("hide");
               var quantity = 0;
           } else {
               $(element).prev().text(parseInt(count) - 1);
               var quantity = parseInt(count) - 1;
           }
           var old_total = parseFloat($('#option_total').val());
           var total = old_total - parseFloat(single_rate);
           total = parseFloat(total).toFixed(2);
           $('#show_total').text('合计：$' + total);
           $('#option_total').val(total);
           $('#food_quantity').val(quantity);
       }

       //submit
       function submit_option() {
           if ($('input[name="662"]:checked').val() == null) {
               var msg = '大小';
               alert(msg + '为必选项');
               return false;
           }

           //readio checkbox 删除旧数据添加新数据
           var radio_total = 0;
           $("input[type='radio']").each(function() {
               var info = this.value;
               var arr_info = info.split('_');

               $("#option_id_" + arr_info[0]).remove();
           });
           $("input[type='checkbox']").each(function() {
               var info = this.value;
               var arr_info = info.split('_');
               $("#option_id_" + arr_info[0]).remove();
           });

           $("input[type='radio']:checked")
                   .each(
                           function() {
                               var info = this.value;
                               var arr_info = info.split('_');
                               radio_total = parseFloat(radio_total)
                                       + parseFloat(arr_info[1]);
                               var input_html = '<input type="text" name="option_id_'+arr_info[0]+'" id="option_id_'+arr_info[0]+'" value="1_'+arr_info[1]+'">';
                               $('#form').append(input_html);
                           });
           $("input[type='checkbox']:checked")
                   .each(
                           function() {
                               var info = this.value;
                               var arr_info = info.split('_');
                               radio_total = parseFloat(radio_total)
                                       + parseFloat(arr_info[1]);
                               var input_html = '<input type="text" name="option_id_'+arr_info[0]+'" id="option_id_'+arr_info[0]+'" value="1_'+arr_info[1]+'">';
                               $('#form').append(input_html);
                           });

           var option_total_last = $('#option_total').val();
           var slt_radio_old = $('#slt_radio_total').val();
           option_total_last = parseFloat(option_total_last)
                   - parseFloat(slt_radio_old) + parseFloat(radio_total);
           option_total_last = option_total_last.toFixed(2);
           $('#show_total').text('合计：$' + option_total_last);
           $('#option_total').val(option_total_last);
           var timestamp = new Date().getTime();
           $.ajax({
               type : 'POST',
               url : '../product/order.do?rand=' + timestamp,//url
               data : $('#form').serialize(),// 你的formid
               success : function(data) {
                   data=JSON.parse(data);
                   if (data.status == 1) {
                       set_shopcart(timestamp);
                   }
               }
           });
       }

       function set_shopcart(timestamp) {
           var food_quantity = $('#food_quantity').val();
           $("input[type='checkbox']:checked")
                   .each(
                           function() {
                               var info = this.value;
                               var arr_info = info.split('_');
                               radio_total = parseFloat(radio_total)
                                       + parseFloat(arr_info[1]);
                               var input_html = '<input type="text" name="option_id_'+arr_info[0]+'" id="option_id_'+arr_info[0]+'" value="1_'+arr_info[1]+'">';
                               $('#form').append(input_html);
                           });
           parent
                   .$('#shop_cart')
                   .append(
                           '<tr class="cart_tr"><td>'
                                   + '<div class="mc" title="<c:out value='${sessionScope.producttan.opName }' />" style="cursor: pointer;" onclick="option_add(this, '+"<c:out value='${sessionScope.producttan.opId }' />"+","+"<c:out value='${sessionScope.producttan.opShop.osId }' />"
                                   + timestamp
                                   + ')"><c:out value='${sessionScope.producttan.opName }' /></div><div class="attach"></div> </td> '
                                   + '<td> <img alt="" src="../page/shop/images/add.png" class="right pointer" style="width:21px;" onclick="option_add(this, '+"<c:out value='${sessionScope.producttan.opId }' />"+","+"<c:out value='${sessionScope.producttan.opShop.osId }' />"
                                   + timestamp
                                   + ')"> <span class="right count" id="cart_count_18122_'+timestamp+'">'
                                   + food_quantity
                                   + '</span> <img alt="" src="../page/shop/images/minus.png" class="right pointer hide" style="width:21px;" onclick="minus_3(this)"> </td> '
                                   + '<td style="text-align:right;"> $<span id="cart_rate_18122_'+timestamp+'">'
                                   + $("#option_total").val()
                                   + '</span> </td> '
                                   + '<td><input type="hidden" name="food_id_quantity[]" value="18122_'+food_quantity+'_'+timestamp+'" id="cart_18122_'+timestamp+'"/> <img alt="" src="../page/shop/images/del.png" class="del pointer" onclick="del(this)"> </td> </tr>');
           //        }
           //food_amount
           var old_total = parseFloat(parent.$('#show_food_amounts').text());

           var total = old_total + parseFloat($("#option_total").val()) - 0;
           total = parseFloat(total).toFixed(2);
           parent.$('#show_food_amounts').text(total);
           parent.$('#food_amounts').val(total);
           var tax_fee = total * parseFloat(parent.$('#tax').val());
           tax_fee = parseFloat(tax_fee).toFixed(2);
           parent.$('#show_tax_fee').text(tax_fee);
           parent.$('#tax_fee').val(tax_fee);

           var amount = (parseFloat(total) + parseFloat(tax_fee) + 0)
                   .toFixed(2);
           parent.$('#show_amount').text(amount);
           parent.$('#amount').val(amount);
           cancle();
       }

       //取消
       function cancle() {
           var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
           parent.layer.close(index);
       }

       $(function() {
           var slt_radio_total = 0;

           $("input[type='radio']:checked").each(
                   function() {
                       var info = this.value;
                       var arr_info = info.split('_');
                       slt_radio_total = parseFloat(slt_radio_total)
                               + parseFloat(arr_info[1]);
                   });
           $("input[type='checkbox']:checked").each(
                   function() {
                       var info = this.value;
                       var arr_info = info.split('_');
                       slt_radio_total = parseFloat(slt_radio_total)
                               + parseFloat(arr_info[1]);
                   });

           slt_radio_total = slt_radio_total.toFixed(2);
           $('#slt_radio_total').val(slt_radio_total);
       });

       //单选radio 点击选中或取消
       var tempradio = null;
       function check(checkedRadio) {
           if (tempradio == checkedRadio) {
               tempradio.checked = false;
               tempradio = null;
           } else {
               tempradio = checkedRadio;
           }
       }
   </script>

</body>
</html>

这样之后就能达到想要的效果。。

1 0