前言
这篇博客主要记录此次开发遇到的一些问题,与解决方案。
1.jsp悬浮窗
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>
更改:这里含有动态id,以及href = “javascript:void(0)”
<%-- 根据后台传来的app_number(是一个整数)来设置范围,这里的idNum就会取1.2.3...app_number--%>
<c:forEach begin="1" end="${sessionScope.app_number}" step="1" var="idNum">
<div class="section row" >
<div class="col-md-6">
<label class="field prepend-icon">
<input type="text" required="required" name="war" id="war" class="gui-input" placeholder="项目镜像">
<label class="field-icon">
<i class="fa fa-lock"></i>
</label>
</label>
</div>
<div class="col-md-6">
<%-- id根据变化的idNum而变化'light${idNum}'--%>
<p><button class="panel-footer button" href = "javascript:void(0)" onclick = "document.getElementById('light${idNum}').style.display='block';document.getElementById('fade${idNum}').style.display='block'">依赖服务选择</button></p>
<div id="light${idNum}" class="white_content">
<div id="fade${idNum}" class="black_overlay" >
<table id="message-table" class="table admin-form theme-warning tc-checkbox-1" >
<thead>
<tr class="">
<th class="hidden-xs">编号</th>
<th class="hidden-xs">服务名</th>
<th class="hidden-xs">选择</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="emp">
<tr class="message-unread">
<td>${emp.sn}</td>
<td>${emp.name}</td>
<td><input type="checkbox" id="${emp.sn}"></td>
</tr>
</c:forEach>
</tbody>
</table>
<%-- 这里可以看见我写了一个js,这里注意一定a上一定不要保留href = "javascript:void(0)",否则你的js将无法调用--%>
<a onclick = "dependencyServiceSure(${idNum})">
<input type="button" style="float:right" value="确定"/></a></div>
</div>
</div>
</c:forEach>
单独说明
- href = “javascript:void(0)” 不能与js函数同时存在,否则js函数不会生效例如:
<a href = "javascript:void(0)" onclick = "dependencyServiceSure(${idNum})">
这样将无法调用dependencyServiceSure()函数。 - 动态id
<div id="light${变化量}" >
这里顺道附上js
function dependencyServiceSure(id) {
document.getElementById('light'+id).style.display='none';
document.getElementById('fade'+id).style.display='none';
}