`
tigerl
  • 浏览: 99563 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

DIV+JS弹出层并置灰窗口为不可点击状态

    博客分类:
  • Jsp
阅读更多
    闲来无事,一直觉得在页面弹出一个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;
}
分享到:
评论

相关推荐

    《基于YOLOv8的八段锦练习指导系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    大语言模型教育应用中的知识冲突挑战与应对策略

    内容概要:本文详细探讨了大语言模型(LLMs)在教育应用中遇到的知识冲突问题,包括概念定义、事实陈述和逻辑推理层面的认知不一致性。文章分析了知识冲突的技术成因,如训练数据噪声、参数化知识表示的局限、推理机制的缺陷、模型架构的不足及外部知识的偏差,并探讨了这些因素对教育应用的深远影响。文中提出了多维度的解决路径,如通过数据增强优化知识表示、利用提示强化上下文连贯、开发量规完善模型评估等。此外,文章从社会文化的宏观视角剖析了知识冲突的外部驱动因素,探讨如何在多元异质、动态演进的社会建构语境中构建开放进取、兼容融通的智能教育应用体系。 适合人群:从事教育技术研究的学者、教育工作者、人工智能研究人员和技术开发者。 使用场景及目标:①帮助教育工作者理解大语言模型在教育应用中的局限性;②为技术人员提供优化大语言模型教育应用的具体策略;③促进教育人工智能技术的可靠性、适应性和普及性提升。 其他说明:文章强调了知识冲突的有效化解不仅能够提升大语言模型在教育场景中的应用价值,还将为人工智能在更广泛领域的可持续发展奠定坚实基础。

    《基于YOLOv8的家具鉴定系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    数据结构day1-思维导图顺序表

    数据结构day1-思维导图顺序表

    STM32超声波红外避障小车

    STM32超声波红外避障小车项目通过STM32微控制器实现自动避障功能。硬件部分主要包括STM32开发板、超声波传感器、红外传感器、直流电机、电池模块和电机驱动模块。超声波传感器用于测量前方障碍物的距离,红外传感器帮助小车检测地面线路或障碍物。电机驱动模块通过STM32控制直流电机的转动,从而实现小车的前进、后退和转向。 在软件方面,STM32通过编写简单的避障算法,实时读取传感器数据,并根据环境信息控制小车的运动。当超声波传感器检测到障碍物时,系统会触发后退或转向操作,避免碰撞。

    哈尔滨工业大学DeepSeek公开课-从图灵测试到DeepSeek.pdf

    哈尔滨工业大学DeepSeek公开课-从图灵测试到DeepSeek.pdf

    《基于YOLOv8的冰上运动监测系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    《基于YOLOv8的体育产业监测系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    《基于YOLOv8的港口机械识别系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    oooooomy_vchat_1742859071.zip

    app开发

    《基于YOLOv8的3D打印缺陷检测系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    Screenshot_2025-03-31-19-36-01-657_com.UCMobile.jpg

    Screenshot_2025-03-31-19-36-01-657_com.UCMobile.jpg

    半导体过程控制篇 集成电路的可靠性仿真_03_31_153111.docx

    半导体过程控制篇 集成电路的可靠性仿真_03_31_153111.docx

    社交应用_鸿蒙OS_API12_高仿微信APP_开发示例_1742847098.zip

    社交应用_鸿蒙OS_API12_高仿微信APP_开发示例_1742847098.zip

    《基于YOLOv8的民间体育监测系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

    安卓_热更新_简化编译_HTHotFix框架_1742849446.zip

    app开发

    2024 最新版智慧消防全流程解决方案(含 BIM+IoT 技术应用 + 典型案例分析)

    2024 最新版智慧消防全流程解决方案(含 BIM+IoT 技术应用 + 典型案例分析)

    电商_微信小程序_学习项目_电商功能演示_1742849441.zip

    电商_微信小程序_学习项目_电商功能演示_1742849441.zip

    jiguang.zip

    jiguang.zip

    《基于YOLOv8的画作真伪鉴别系统》(包含源码、完整数据集、可视化界面、部署教程)简单部署即可运行。功能完善、操作简单,适合毕设或课程设计.zip

    资源内项目源码是来自个人的毕业设计,代码都测试ok,包含源码、数据集、可视化页面和部署说明,可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源,毕设答辩评审绝对信服的保底85分以上,放心下载使用,拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务,拿来就能用的绝对好资源!!! 项目备注 1、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习,也适合小白学习进阶,当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行,也可在此代码基础上进行修改,以实现其他功能,也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件,仅供学习参考, 切勿用于商业用途。

Global site tag (gtag.js) - Google Analytics