<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出窗口,背景半透明</title>
<style type="text/css">
body{margin:0px;}
#bg{width:100%;height:100%;top:0px;left:0px;position:absolute;filter: Alpha(opacity=50);opacity:0.5; background:#000000; display:none;}
#popbox{position:absolute;width:400px; height:400px; left:50%; top:50%; margin:-200px 0 0 -200px; display:none; background:#666666;}
</style>
<script type="text/javascript">
function pupopen(){
document.getElementById("bg").style.display="block";
document.getElementById("popbox").style.display="block" ;
}
function pupclose(){
document.getElementById("bg").style.display="none";
document.getElementById("popbox").style.display="none" ;
}
</script>
</head>
<body>
前天在论坛上问了,也查了,就是弄不出来......太菜啦~~
昨天终于搞定,看到好多人也想要这个效果,一起分享一下吧
IE和FF,OP均可以~
先说原理:两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
</br>
<a href="#" onclick="pupopen()">点击这里打开窗口</a>
<div id="bg"></div>
<div id="popbox">两个层,一个高度和宽度都是100%,另一个就是你要弹出的窗口的具体内容,半透明在IE中是用filter: Alpha(opacity=60);在非IE中用opacity:0.60;
<br>
<br>
<br>
<a href="#" onclick="pupclose()">点击关闭窗口</a>
</div>
</body>
</html>
分享到：
相关推荐
在网页设计和开发中，自定义半透明遮罩层是一种常见的视觉效果，它通常用于创建交互式的用户体验，比如加载提示、弹出窗口或模态框背景。遮罩层可以覆盖整个页面或者特定区域，通过半透明黑色或灰色背景，使用户聚焦...
掌握按键事件处理、背景图片设置以及控件透明等技术，将帮助你开发出更加美观和交互性更强的界面。记住，实践是学习的最佳途径，通过实际操作和调试代码，你将能更深入地理解和运用这些知识点。
这种技术的核心在于利用JavaScript监听用户的鼠标动作，当用户在网页上选择（划词）文本时，会触发一个模态对话框（modal div）弹出，通常用于显示与所选文本相关的信息或功能，如分享、翻译等。 首先，我们要理解...
3、弹出窗口圆角，窗口半透明，但内容不透明；带阴影； 4、窗口可拖动； 5、拖动停止之后，滚动页面时窗口位置不动； 6、可以使用jQuery； 7、有关闭按钮； 进一步功能具体描述： 点按钮，会有一个...
首先，PopupWindow是Android SDK中的一个类，它允许开发者在应用的视图层次结构之外显示一个弹出窗口。这个窗口可以包含任意的View对象，并且可以设置其大小、位置以及显示和消失的动画。在创建PopupWindow时，我们...
这可以通过添加额外的CSS类来实现，例如给body添加一个半透明的背景遮罩层，并在弹出层显示时应用。 此外，为了增强交互性，还可以加入关闭弹出层的按钮或点击非弹出层区域自动关闭的功能。这需要监听`click`事件，...
在Android开发中，PopupWindow是...在实际开发中，根据项目需求，可能还需要处理更多细节，比如背景半透明效果、点击外部自动关闭PopupWindow等。通过不断实践和优化，你可以创建出符合用户体验的PopupWindow分享功能。
解压密码：RJ4587 今天我们要分享一款可以拖拽的小窗口程序，这个窗口特效是利用jQuery UI和CSS3制作而成的，窗口是半透明的，可以用鼠标拖拽，配合大气的山水背景图，显得非常壮观。拖拽功能是jQuery实现的，另外...
在Web开发中，模态窗口（Modal Window）和弹出层（Popup Layer）是常见的交互设计元素，它们用于展示重要信息、用户确认操作或者提供额外的功能。本篇将围绕"纯CSS+JS实现WebApp模态窗口弹出层特效"这一主题展开，...
- **背景半透明**：为了突出弹出层，背景通常会被设置为半透明，但不应完全遮挡用户对网页其他部分的访问。 7. **可访问性**： - 对于有障碍的用户，确保弹出层可以通过键盘导航，并且遵循无障碍网页设计标准。 ...
首先，模态窗口（Modal Window）是一种非侵入性的对话框，它在用户当前浏览的页面上覆盖一个半透明的黑色背景，焦点集中在弹出的窗口上。CSS3在这里主要负责模态窗口的样式，包括形状、颜色、过渡动画和阴影效果。...
jQuery弹出层，通常被称为模态对话框或浮动窗口，是在网页主界面之上显示一个半透明或全透明的遮罩层，以及一个独立的窗口，用于展示详细信息、警告提示、表单输入等。这种设计可以避免用户在处理当前任务时被其他...
2. **遮罩层实现**：遮罩层通常用于在页面上显示半透明的背景，以突出显示某个部分或阻止用户与页面其余部分交互。可以使用CSS和HTML创建一个简单的遮罩层，如下： ```html <div id="mask"></div> ``` ```css #...
为了解决这个问题，我们可以选择在弹出窗口下方添加一个`iframe`来覆盖`select`，或者在弹出窗口出现时临时隐藏`select`。这里我们采用第二种方法。在弹出窗口时，调用`DispalySelect(0)`隐藏所有`select`，关闭时...
1. 弹出窗口：PopupWindow可以在屏幕的任意位置弹出，不占用Activity的布局空间，可以自定义其大小和位置。 2. 可交互性：用户可以通过点击PopupWindow中的元素进行交互，比如选择、操作等。 3. 动画效果：可以添加...
在网页设计中，创建半透明遮罩效果是一种常见的交互手段，用于增强用户体验，例如在弹出对话框或加载新内容时使背景变得模糊并不可交互。本实例将介绍如何使用CSS和JavaScript（纯JS）来实现这一效果。 首先，我们...
"遮盖层"则是在弹出窗口出现时，覆盖在主页面上的一层半透明背景，用于将用户注意力集中在弹出内容上，同时防止与背景交互。 这篇博客文章可能探讨了如何在Firefox、IE6以及Google Chrome等不同浏览器上实现高效且...
通常，遮罩层会具有半透明效果，允许用户看到页面背景，但同时弱化了非焦点区域的视觉权重。 2. **微信内置浏览器（WeChat Webview）**： 微信内嵌了一个基于WebKit的浏览器引擎，名为Webview，用于在微信内部展示...
遮罩层是用户交互中常见的一种视觉效果，它通常用于覆盖在原有内容之上，用于提供新的交互界面或强调特定信息，同时使原页面内容暂时不可交互，这通过设置元素的`z-index`层叠顺序和半透明的背景色来实现。...
`遮罩层`是网页设计中常见的效果，通常用于创建弹出窗口或图片蒙版。CSS的`mask`属性或者利用`background-color`结合`opacity`实现半透明遮罩，也可以使用SVG的`mask`元素进行更复杂的图形遮罩。这些技术可以提升...