[info]今天遇到了一个弹窗的一个问题，网上找了一下发现弹窗采用一个隐藏div是比较方便快捷的，先贴出找到的代码[/info]
ceshi.jsp
[sourcecode language=”html” title=”ceshi.jsp”]
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</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>
<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>
<p>测试测试</p>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</body>
</html>
[/sourcecode]
[info]由于采用了弹窗，所以请求数据采用AJAX就会显示比较方便一些，异步同步数据，所以这个代码就可以采用jQuery改造一下适合自己的项目。这里我用了jquery的3.3.1的版本，记得导入包。[/info]
ceshi1.jsp
[sourcecode language=”html” title=”ceshi1.jsp”]
<%@ 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style>
.black_overlay{
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 {
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>
<script type="text/javascript" src="/LeaveSystem/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fade").hide();
$("#light").hide();
$(".btn").bind("click",function(){
$("#fade").show();
$("#light").show();
});
$("#exit").click(function() {
$("#fade").hide();
$("#light").hide();
});
});
</script>
</head>
<body>
<body>
<p>示例弹出层：</p> <input type=’button’ class="btn" value=’请点这里’>
<div id="light" class="white_content">这是一个层窗口示例程序.
<input align="right" type=’button’ id="exit" value=’关闭’ >
<p>测试测试</p>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</body>
</html>
[/sourcecode]
jquery可以去官网下载，感觉会了用起来还是比js花样更多了。
附官网下载链接：https://jquery.com/download/
我修改后的效果图：
