闲来无事，一直觉得在页面弹出一个DIV层，并把窗口置为不可点击态很好，就试了试，网上找的代码都比较复杂，不一定复杂的就是最好的！自己写了个比较简单的就几行代码！很简单的几行css，几行js，几个div。IE，360SE，火狐下测试可以完美弹出，全屏遮盖！
直接看代码：
<%@ 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>弹出层</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="description" content="This is my page">
<style>
body{margin:0 0;}
.myd{
background: #77887E ;
height: 100%;
left: 0%;
right: 0%;
width: 100%;
position: absolute;
z-index: 10000;
}
.pd{
background: #c2ee11 ;
height: 300px;
width: 450px;
position: absolute;
z-index: 10002;
}
</style>
</head>
<script type="text/javascript">
function pop(){
document.getElementById("md").style.display="block";
//实现透明遮盖，如果不需要透明，不需要设置此属性
document.getElementById("md").style.filter="alpha(opacity=80)";
//clientWidth取的是实际窗口文档域的大小
var _x = document.body.clientWidth;
var _y = document.body.clientHeight;
var a_w = 450;
var a_h = 300;
//alert(_x+" == " + _y);
//计算弹出层的位置，目的是要显示在正中间
var dleft = _x/2 - a_w/2;
var dtop = _y/2 - a_h/2;
//alert(dleft+" == "+dtop);
var cd = document.getElementById("pd").style;
//cd.setAttribute("left",dleft+"px");
//cd.setAttribute("top",dtop+"px");
cd.left=dleft+"px";
cd.top = dtop+"px";
cd.display="block"; }
function close_div(){
document.getElementById("md").style.display="none";
document.getElementById("pd").style.display="none";
}
</script>
<body>
<!-- 遮盖层 -->
<div class="myd" style="display: none" id="md"></div>
<!-- 弹出层 -->
<div class="pd" style="display: none" id="pd">
<div style="height: 20px;background: red;width: 100%;text-align: right">
点击关闭层：<button onclick="close_div()">X</button>
</div>
<label>这里是要显示的内容</label>
</div>
<input type="button" onclick="pop()" value="弹出层"> <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
This is my JSP page. <br>
</body>
</html>
或者直接下载附件，运行看效果
使用CSS3则只需要简单的一个属性即可opacity:value
value的取值从0.1-1,1为正常背景，0.1为完全透明，值越接近于1就越不透明
.div1{
opacity:0.5;
background:#666;
}
分享到：
相关推荐
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
3.jQuery弹出层插件PopupDiv-v1.0下载(支持ajax、居中等效果) 4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一...
可是这会让我们打开服务评分界面时还可以点击body主界面中的购物车等链接，这是不对的，因此我们可以使用层叠样式表来指定外围的div的z-index低于当前服务评分表单页面，不能被点击，如下: /* 定义一个div用于覆盖...
12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现...
12.5 关闭窗口不提示的方法 12.6 关闭窗口时的提示 12.7 定时弹出窗口 12.8 调整窗口的大小 12.9 打开的窗口居中 12.10 打开窗口的等待提示 12.11 在打开的窗口中返回数据 12.12 创建弹出窗口 12.13 不允许窗口出现...
+为ExtAspNet.Alert.Show增加点击确定的JavaScript回调函数。 -一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！",...
+为ExtAspNet.Alert.Show增加点击确定的JavaScript回调函数。 -一个典型应用，在Window控件中打开新页面，如果传递的参数不正确，则首先提示参数不对然后关闭此弹出窗口。 -ExtAspNet.Alert.Show("参数错误！",...
假设我们有一个容器container如下: 代码如下: <... <div id=”container”> </div> 现在要在网页中弹出一个div层，使在关闭弹出的div层之前不可操作container。 那么，我们首先需要定义出这个遮罩的div层如下: 代
53:关闭弹出两窗口的代码下载 54：鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58：点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...
53:关闭弹出两窗口的代码下载 54：鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58：点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...
昆山工业技术研究院着眼于为委托用户和质检机构搭建良好的沟通桥梁，免去目前市场业务中企业用户需要实地地并频繁地与检测机构沟通，从而提出自己的委托乃至下委托单、等待检测报告等，设计并研发了市场上首款提供...
点击“浏览”按钮将会弹出模板选择层，模板是按分类进行树形显示，点击末级节点，右侧将会出现改分类节点下的所有页面模板，点击模板即可，如下图所示： 2.3.3. 文档配置 文档配置是对文档进行全局设置，同时也...
Alwaysontop 可以使弹出的窗口始终位于顶端 Browse4redirct 页面自动重定向到某个地址 Moustrail 鼠标移动带有"轨迹" windowresizer 指定窗口的分辨率 Pageborder 设定页边距 ColourDethRedirect 根据访问者的...
*双击对象的属性检测,双击图片、链接、表格，层就会弹出相关的修改属性窗口! *更完善的属性感应功能，能支持字体及字号的属性检测! *更美观的图像形式的状态切换功能! *更完善的Word文档导入功能，无需特殊的服务器...
●标签为只读文件时，修改标签点击进入下一步时出现错误的弹出信息。 ●标签批量设置页面替换部位选择为“全部替换”时无效。 ●修改内嵌代码保存时不会自动刷新JS。 ●CodeSnippetPanel.config有错。 ●生成的...
1.12 强制在弹出窗口中打开链接 1.13 平滑滚动页面到某个锚点 1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 ...
9.18.htm 左键弹出式菜单效果的完整代码 9.19.htm 实现浮动菜单效果的完整代码 9.20.htm 实现树型导航菜单的完整代码 第10章（/C10/） ReturnText Ajax返回字符串数据 ReturnXML ...