闲来无事，一直觉得在页面弹出一个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;
}
分享到：
相关推荐
当我们谈论“javascript+html弹出层实例”时，我们通常是指在网页中实现一种可浮动、可自定义的对话框，这种对话框会在用户交互时突然出现，显示额外的信息或功能，如图片、文字或整个 div 元素。这种弹出层效果极大...
在JavaScript编程中，"div弹出窗口"是一种常见的交互式设计，它允许用户在不离开当前页面的情况下查看或操作相关信息。这种技术常被用于显示警告、提示、对话框或者加载内容丰富的模块，如图片画廊、表单等。在本...
在"js弹出div获取弹出层中文本值"这个场景中，我们将讨论如何利用JavaScript实现这一功能，并确保它在主流浏览器如IE6+、Firefox（ff）等上兼容。 首先，我们需要创建一个可隐藏的div元素作为弹出层，然后在需要的...
- 使用CSS样式控制弹出层的位置、大小、背景色等属性，并将其初始状态设为隐藏。 2. **JavaScript事件处理**： - 通过JavaScript监听用户的特定行为，如点击按钮。使用`addEventListener`方法绑定事件处理函数。 ...
8. **点击穿透**：为了避免弹出层下方的元素仍然可点击，可以设置`pointer-events: none;`在不需要交互的元素上，然后在弹出层上设置`pointer-events: auto;`。 通过上述方法，我们可以有效地解决`div`弹出层的定位...
弹出层的遮罩效果是模拟窗口不可或缺的一部分，它通常是一个全屏的Div，背景颜色通常为半透明黑色。这个遮罩层可以通过设置其`width`和`height`为`100%`，以及`position`为`fixed`来覆盖整个屏幕。同样，它的可见性...
2. **可见性控制**：`display`属性用于显示或隐藏弹出层，例如，设置为`none`可隐藏层，而`block`或`flex`则可使其可见。 3. **样式美化**：CSS可以用来设置背景颜色、边框、阴影、过渡效果等，以使弹出层更吸引人...
在JavaScript中，可以创建一个新的`<div>`作为弹出层，并设置其样式使其位于其他元素之上，通过CSS的`display`属性控制显示和隐藏。例如： ```javascript var dialog = document.getElementById('dialog'); dialog....
"js弹出层特效点击按钮弹出窗口支持鼠标拖动"这个主题，关注的是如何创建一个具有动态效果的弹出层，它不仅可以在用户点击按钮时出现，还允许用户通过鼠标拖动来调整弹出层的位置。 首先，我们需要理解HTML结构。在...
在前端开发中，JavaScript弹出层（也称为模态窗口或对话框）是不可或缺的交互元素，它们用于显示额外信息、获取用户输入或执行特定操作。"18种非常实用的js弹出层"集合提供了多种不同的实现方式，旨在帮助开发者在...
4. **关闭功能**：描述中提到右上角有关闭功能，这通常通过在弹出层上添加一个关闭按钮（如`×`图标）并绑定点击事件来实现。当用户点击该按钮时，弹出层和遮罩层都会消失。 5. **响应式设计**：为了适应不同屏幕...
"div弹出层"实际上是一个基于HTML `<div>` 元素构建的浮动窗口，它可以在用户与页面交互时临时出现在页面上，不影响主要内容的展示。本篇文章将深入探讨div弹出层的概念、实现方式以及相关知识点。 一、div弹出层的...
总的来说，JavaScript弹出层是一个广泛使用的功能，通过结合HTML、CSS和JavaScript，我们可以创建各种各样的弹出层效果，提高网页的互动性和用户体验。对于网页开发者来说，掌握弹出层的制作方法是必不可少的技能之...
一个简单的弹出层通常包含一个隐藏的`<div>`元素，通过添加CSS样式如`display:none`来控制其默认不可见。当需要显示弹出层时，这个样式会被改变为`display:block`或者`display:flex`。 接着，CSS是用来美化弹出层的...
在网页开发中，jQuery提供了便捷的方式来创建动态的、可交互的弹出div层窗口。这种技术通常用于显示警告、消息、表单或任何需要用户注意的内容。创建一个弹出div层窗口的关键在于利用jQuery的`show()`、`hide()`、`...
本案例集主要探讨如何利用"div"配合CSS（层叠样式表）和JavaScript来实现各种弹出窗口效果。这些效果对于网页交互性和用户体验至关重要，如消息提示、登录框、模态对话框等。 首先，我们来看"iframe的div遮罩层(可...
当触发元素被点击时，会调用`show()`函数，该函数设置隐藏层为显示状态，并调整其高度以覆盖整个页面，同时显示弹出层。当点击弹出层的关闭按钮时，会调用`hide()`函数，该函数则会将隐藏层和弹出层都隐藏起来，从而...
JavaScript（简称JS）是一种轻量级的脚本语言，广泛应用于网页和网络应用开发，实现动态内容、用户交互、...通过这些步骤，你可以构建一个功能完善的JavaScript弹出层城市切换效果，为用户提供流畅且直观的交互体验。
在这个项目中，我们讨论的是如何使用这两种语言来创建一个可拖动的弹出层，并实现兼容IE7及以上版本，包括Firefox和Chrome在内的多种浏览器的锁屏效果。这个功能在网页应用中很常见，比如在显示模态对话框或提示信息...