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

最新推荐文章于 2022-11-03 16:35:08 发布

tigerl2008

最新推荐文章于 2022-11-03 16:35:08 发布

阅读量1.2k

点赞数

分类专栏： Jsp 文章标签： DIV弹出层窗口置灰不可点窗口弹出层透明DIV

本文链接：https://blog.csdn.net/tigerl2008/article/details/84132230

版权

Jsp 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

闲来无事，一直觉得在页面弹出一个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;
}

tigerl2008

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DIV+JS弹出层并置灰窗口为不可点击状态

闲来无事，一直觉得在页面弹出一个DIV层，并把窗口置为不可点击态很好，就试了试，网上找的代码都比较复杂，不一定复杂的就是最好的！自己写了个比较简单的就几行代码！很简单的几行css，几行js，几个div。IE，360SE，火狐下测试可以完美弹出，全屏遮盖！直接看代码：[code="java"] 弹出层 ...
复制链接

扫一扫