JavaScript Div 弹出层 遮罩层
来源：互联网 发布：八爪鱼软件破解版 编辑：程序博客网 时间：2024/05/18 01:41
1、共两个页面index.jsp中只有一个点击事件按钮，window.jsp中只有一个关闭按钮。
大家可根据自己的需要修改，本实例代码简单只是单纯的实现功能没有考虑太多的兼容性。
本实例在IE8下测试正常运行。
2、代码：
**********index.jsp源码**********
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'popDiv.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<script type="text/javascript" >
function pobDiv()
{
var mybg = document.getElementById("mybg");
var flag = false;
if(mybg != null){
//alert("创建mybg");
document.body.removeChild(mybg);
}
mybg = document.createElement("div");
mybg.setAttribute("id","mybg");
mybg.style.background = "#000";
mybg.style.width = "100%"; //调背景的宽
mybg.style.height = "100%";//调背景的高
mybg.style.position = "absolute";
mybg.style.top = "0";
mybg.style.left = "0";
mybg.style.zIndex = "1";
mybg.style.opacity = "0.3";
mybg.style.filter = "Alpha(opacity=30)";
document.body.appendChild(mybg);
var myAlert = document.getElementById("alert");
if(myAlert != null){
document.body.removeChild(myAlert);
}
myAlert = document.createElement("div");
myAlert.setAttribute("id","alert");
myAlert.style.display = "block";
myAlert.style.position = "absolute";
myAlert.style.top = "20%";//显示的div离上面的距离
myAlert.style.left = "50%";//显示的div离左边的距离
myAlert.style.width = "20%";
//myAlert.style.height = "100%";
myAlert.style.marginTop = "-20px";
myAlert.style.marginLeft = "-150px";
myAlert.style.zIndex = "2";
myAlert.innerHTML="<iframe id='czIframe' width='250' height='350' src='window.jsp' marginheight=0 marginwidth=0 name='czIframe' ></iframe>";
document.body.appendChild(myAlert);
document.body.style.overflow = "hidden";
}
// function closeDiv(){
// var mClose = window.frames['czIframe'].document.getElementById("close");
// mClose.onclick = function() {
// var myAlert = document.getElementById("alert");
// myAlert.style.display = "none";
// mybg.style.display = "none";
// }
}
</script>
</head>
<body>
<input type="button" value="单击" onClick="javascript:pobDiv();" />
</body>
</html>
**********window.jsp源码**********
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<title>对应操作</title>
<script type="text/javascript">
function closeFun(){
var myAlert = window.parent.document.getElementById("alert");
var mybg = window.parent.document.getElementById("mybg");
myAlert.style.display = "none";
mybg.style.display = "none";
}
</script>
</head>
<body>
<input type="button" value="关 闭" class="close" id="close" onClick="closeFun();">
</body>
</html>
- JavaScript Div 弹出层 遮罩层
- 遮罩层 div弹出层
- Javascript弹出带关闭的DIV层
- JavaScript弹出窗口DIV层效果代码
- JavaScript弹出窗口DIV层效果代码 [
- JAVASCRIPT弹出窗口DIV层效果代码
- 利用JavaScript弹出div层，以及递归调用
- JavaScript弹出Div层（嵌入网页） -可拖动
- JavaScript弹出Div层（嵌入文字）- 可拖动
- JavaScript弹出Div层（嵌入文字）- 可拖动+最小化
- 弹出div层
- js弹出div层
- div弹出层
- DIV 弹出层
- div弹出层
- DIV弹出层代码
- 动态弹出DIV层
- div弹出层
- 浮点DSP未来的发展
- 在爱与被爱的选择里，我选择了爱：伤感日志
- KeyWords Search(AC automation)
- mysql C API 调用存储过程
- 快播插件API
- JavaScript Div 弹出层 遮罩层
- PHP APC的使用
- 程序猿的一些幽默
- 如何在Android中使用OpenCV
- 朝花夕拾-1-程序的翻译和启动
- Response及一些案例
- 数据流程图
- MVC模式（三层架构模式）
- 深入理解浏览器兼容性模式
