点击按钮触发事件弹出 div 小窗口

比眉伴天荒 2023-06-19 02:56 15阅读 0赞

首先设置配置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模块

<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>