首先设置配置mydialog.css
@charset "utf-8";
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid #b0c4de;
background-color: white;
z-index:1002;
overflow: auto;
} 在HTML和JSP中导入后<link href="${ctx}/css/mydialog.css" rel="stylesheet" type="text/css"> 添加按钮和div模块
<div align="right" style="margin-right: 20px;">
<button type="button" class="btn btn-success"
οnclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
批量录入</button>
</div><form name="addBatchNum" id="addBatchNum" method="post">
<div id="light" class="white_content">
<div style="margin-right: 5px;" align="right">
<a href = "javascript:void(0)" type="button" class="btn btn-default"
onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">
关闭</a></div>
<div>
<input type="hidden" class="input-1p Wdate left width150"
name="hiddenID2" id="hiddenID2" />
<input type="hidden" class="input-1p Wdate left width150"
name="productid2" id="productid2" />
<table>
<tr>
<td><label class="label-1 left width85">生产订单号:</label></td>
<td><input name="pono2" required="true" class="form-control"
id="pono2" validType="checkDuplicate" missingMessage="必填信息"></td>
<td><label class="label-1 left width85">产品型号:</label></td>
<td><input name="model2" required="true" class="form-control"
id="model2" readonly="readonly"></td>
<td><label class="label-1 left width85">产品类型:</label></td>
<td><select name="prodectType2" id="prodectType2"
class="input-1p Wdate left width150" disabled="disabled">
<c:forEach var="productType" items="${productTypes}">
<option value="${productType.productNo}">
${productType.productName}</option>
</c:forEach>
</select></td>
</tr>
<tr>
<td><label class="label-1 left width85">投入人数:</label></td>
<td><input name="sumWorker2" required="true" class="form-control"
id="sumWorker2" validType="checkDuplicate" missingMessage="必填信息"></td>
<td><label class="label-1 left width85">组 别:</label></td>
<td><select name="groupid2" id="groupid2"
class="input-1p Wdate left width150" readonly="readonly">
<c:forEach var="dept" items="${dptList}">
<option value="${dept.id}">${dept.name}</option>
</c:forEach>
</select></td>
<td><label class="label-1 left width85">生产工序:</label></td>
<td><select name="progress2" id="progress2"
class="input-1p Wdate left width150">
<option value="2">组装</option>
<option value="4">组装+包装</option>
<option value="1">包装</option>
<option value="5">大小卷筒加工</option>
<option value="6">底座加工+包装</option>
<option value="7">卷发头加工</option>
<option value="8">直发头加工</option>
<option value="9">手柄加工</option>
<option value="10">返工</option>
<option value="11">全检+包装</option>
<option value="12">SMT</option>
<option value="13">波峰焊</option>
<option value="14">后焊</option>
<option value="15">功能测试</option>
</select></td>
</tr>
<tr>
<td><label class="label-1 left width85">生产日期码:</label></td>
<td><input name="dateCode2" required="true" class="form-control"
id="dateCode2" validType="checkDuplicate" missingMessage="必填信息"></td>
<td><label class="label-1 left width85">目标产能:</label></td>
<td><input name="targetProduct2" required="true" class="form-control"
id="targetProduct2" readonly="readonly"></td>
<td><label class="label-1 left width85">标准产能:</label></td>
<td><input name="standardProduct2" required="true" class="form-control"
id="standardProduct2" readonly="readonly"></td>
<td style="hidden: true;"><label id="ItemId" class="label-1 left" style="display: none;">产品条码：</label>
<input type="text" class="input-1p Wdate left width150"
name="item_bcd2" id="item_bcd2" style="display: none;" /></td>
</tr>
<tr>
<td><label class="label-1 left width85">项目编码:</label></td>
<td><input name="QCCheckProjectID2" required="true" class="form-control"
id="QCCheckProjectID2" validType="checkDuplicate" missingMessage="必填信息"></td>
<td><label class="label-1 left width85">添加数量:</label></td>
<td><input name="number" required="true" class="form-control"
id="number" validType="checkDuplicate" missingMessage="必填信息"></td>
<td><label class="label-1 left width85">时 间 段： </label></td>
<td><select name="hourperiod" id="hourPeriod"
class="input-1p left width85">
<option value="8:30">1</option>
<option value="9:30">2</option>
<option value="10:30">3</option>
<option value="11:30">4</option>
<option value="13:30">5</option>
<option value="14:30">6</option>
<option value="15:30">7</option>
<option value="16:30">8</option>
<option value="18:30">9</option>
<option value="19:30">10</option>
<option value="20:30">11</option>
<option value="21:30">12</option>
</select></td>
</tr>
</table>
</div>
<div><br/>
<button type="button" class="btn btn-default" id="openOrder">开单</button>
<button type="submit" class="btn btn-success" id="sure">确定</button>
<button type="button" class="btn btn-danger" id="closeAddBatch"
onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">取消</button>
</div>
</div>
<div id="fade" class="black_overlay"></div>
</form>这样就可以了，提交form的代码就自己去写了。下面给个初始的模板示例，从百度看到的
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>点击文字弹出一个DIV层窗口代码</title>
<style>
.black_overlay{
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=88);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 55%;
height: 55%;
padding: 20px;
border: 10px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
</style>
</head>
<body>
<p>示例弹出层：<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">请点这里</a></p>
<div id="light" class="white_content">这是一个层窗口示例程序.
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">点这里关闭本窗口</a></div>
<div id="fade" class="black_overlay"></div>
</body>
</html>