如果不了级的基本的清楚官网查看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;" οnclick="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"
οnclick="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"
οnclick="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"
οnclick="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"
οnclick="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"
οnclick="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"
οnclick="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"
οnclick="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"
οnclick="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;"
οnclick="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;" οnclick="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;" οnclick="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;" οnclick="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" οnclick="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>
这样之后就能达到想要的效果。。