<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="w" uri="/WEB-INF/sii18n.tld"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/nresources/themes-default/css/zlstyle.min.css" type="text/css"/>
<script src="${pageContext.request.contextPath}/njs/jquery-1.4.2.pack.js"></script>
<style type="text/css">
.divv
{
position:absolute;
top:30%;
left:30%;
width:160px;
height:80px;
border:0px solid #FFF;
background-color:#FFF;
text-align:center;
display:none;
z-index:300;
}
.popup
{
border:1px solid red;
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=45);
opacity:0.45;
display:none;
z-index:200;
}
.fff
{
border:1px solid blue;
position:relative;
background-color:#000;
}
</style>
<script type="text/javascript">
$(document).ready(
function(){
goCenter();
$(window).scroll(
function(){
goCenter();
}
);
$(window).resize(
function(){
goCenter();
}
);
$("#submitButton").click(
function(){
var isSelect = false;
var productRadios = document.getElementsByName("code");
for(var i=0; i<productRadios.length; i++)
{
if(productRadios[i].checked==true)
{
isSelect = true;
break;
}
}
if(isSelect==false)
{
$("#popupDiv").show();
$("#checkDiv").show();
return false;
}
else
{
$("#popupDiv").show();
$("#alertDiv").show();
}
}
);
$("#confirmButton").click(
function(){
$("#popupDiv").hide();
$("#alertDiv").hide();
document.getElementById("submitButton").disabled = true;
document.proOrderForm.submit();
}
);
$("#unlockButton,#checkButton").click(
function(){
$("#popupDiv").hide();
$("#alertDiv").hide();
$("#checkDiv").hide();
}
);
}
);
function goCenter()
{
var h = $(window).height();
var w = $(window).width();
var st = $(window).scrollTop();
var sl = $(window).scrollLeft();
$("#popupDiv").css("width", w+sl);
$("#popupDiv").css("height", h+st);
$(".divv").css("top", ((h-80)/2)+st);
$(".divv").css("left", ((w-160)/2)+sl);
}
</script>
</head>
<body>
<div class="selfservice-form">
<form name="proOrderForm" method="POST" action="${pageContext.request.contextPath}/business/proOrderCfmSWX.action">
<input type="hidden" name="phoneNO" value="${phoneNO}"/>
<table width="100%">
<thead>
<tr>
<th width="10%"><w:message key='W0301002' type='w'/></th>
<th width="10%"><w:message key='W0301001' type='w'/></th>
<th width="35%"><w:message key='W0301004' type='w'/></th>
<th width="45%"><w:message key='W0301003' type='w'/></th>
</tr>
</thead>
<tbody id="spltdata_list">
<s:iterator value="proOrderOut.product_list" status="status">
<tr>
<td class="common-tips">
<input class="btn-recharge-single" type="radio" name="code" value='<s:property value="code"/>'/>
</td>
<td><s:property value="#status.index+1"/></td>
<td><s:property value="code"/></td>
<td><s:property value="name"/></td>
</tr>
</s:iterator>
</tbody>
<tr>
<td colspan="4">
<input type="button" id="submitButton" class="btn-style1" value='訂購'/>
</td>
</tr>
</table>
</form>
</div>
<div class="popup" id="popupDiv">
<iframe frameborder="1" scrolling="no" height="100%" width="100%" class="fff"></iframe>
</div>
<div class="divv" id="alertDiv">
</br>
確定訂購所選擇的產品？
<div style="margin-top:25px;margin-bottom:8px;">
<input type="button" value="確定" id="confirmButton" class="btn-style1"/>
<input type="button" value="取消" id="unlockButton" class="btn-style1"/>
</div>
</div>
<div class="divv" id="checkDiv">
</br>
請選擇需要訂購的產品!
<div style="margin-top:25px;margin-bottom:8px;">
<input type="button" value="返回" id="checkButton" class="btn-style1"/>
</div>
</div>
</body>
</html>