layer的弹出层的简单的例子
如果不了级的基本的清楚官网查看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>
这样之后就能达到想要的效果。。
声明：该文观点仅代表作者本人，牛骨文系教育信息发布平台，牛骨文仅提供信息存储空间服务。
- 上一篇： 前端UI框架——Layui
- 下一篇： bootstrap和easyui区别
