layer的彈出層的簡單的例子
阿新 • • 發佈:2019-01-26
如果不了級的基本的清楚官網檢視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 class="caipin" style="display: none;"> <table class="table order-list" style="margin-bottom: 0;"> <tbody> <tr> <td width="1%"></td> <td class="order-name" width="45%"><span class="ct-food-title">半隻</span></td> <td class="order-price" width="23%"><span class="price left ct-food-rate">$ 0.00</span></td> <td class="order-count" id="food2_663" width="30%"><img alt="" src="../page/shop/images/plus.png" class="right pointer" onclick="add(this, 663)"> <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, 663)"></td> <td width="1%"></td> </tr> <tr> <td width="1%"></td> <td class="order-name" width="45%"><span class="ct-food-title">全只</span></td> <td class="order-price" width="23%"><span class="price left ct-food-rate">$ 10.00</span></td> <td class="order-count" id="food2_664" width="30%"><img alt="" src="../page/shop/images/plus.png" class="right pointer" onclick="add(this, 664)"> <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, 664)"></td> <td width="1%"></td> </tr> </tbody> </table> </div> --> <!-- -----------------------------------------------------------------------------------------------------> <!-- log on end --> </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> <!-- ajax提交的表單 --> <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>
這樣之後就能達到想要的效果。。