<!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>css外层DIV半透明内层div不透明-弹出层效果的实现【实例】</title>
<style type="text/css">
<!--
body,td,th {
font-size: 12px; padding:0; margin:0;
}
.tanchuang_wrap{ width:600px; height:400px;position:absolute;left: 0px;top: 0px;z-index:100; display:none;}
.lightbox{width:600px;z-index:101; height:400px;background-color:#ccc;filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5; position:absolute; top:0px; left:0px;}
.tanchuang_neirong{width:353px;height:153px;border:solid 1px #f7dd8c;background-color:#FFF;position:absolute;z-index:105;left: 123px;top: 123px;}
-->
</style>
<script language="javascript">
function closeDiv(divId){
document.getElementById(divId).style.display = 'none';
}
function displayDiv(divId){
document.getElementById(divId).style.display = 'block';
}
</script>
</head>
<body>
<div style="width:400px; height:400px; position:relative; text-align:center;">
<div class="tanchuang_wrap" id="aaaa">
<div class="lightbox"></div>
<div class="tanchuang_neirong">
<p><span onClick="closeDiv('aaaa')" style=" cursor:pointer;">关闭</span></p>
这里是弹窗内容</div>
</div>
<span onclick="displayDiv('aaaa')" style="cursor:pointer;">点击我</span>
<p>测试通过，兼容IE6.0、IE7.0、火狐3.6、遨游等各大浏览器</p>
</div>
</body>
</html>
http://www.cssk8.com/html/css_example/201004/30-2263.html
分享到：
相关推荐
在 Web 开发中，弹出居中背景半透明 div 层是一种常见的交互效果，通过 JavaScript 和 CSS，我们可以轻松实现这种效果。在本文中，我们将详细介绍如何使用 JS+CSS 实现弹出居中背景半透明 div 层的方法。 首先，让...
在网页设计中，有时我们希望实现背景透明但保持文字清晰可见的效果，这在CSS中可以通过多种方式实现。本文将详细讲解如何使用CSS代码来达到这一目标，并确保代码在火狐（Firefox）、360浏览器、谷歌（Chrome）以及IE...
在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...
1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...
在网页设计中，"div+css弹出层带关闭按钮"是一种常见的交互设计技术，用于创建弹出式对话框或提示窗口。这种技术利用HTML结构和CSS样式来实现，同时结合JavaScript来添加动态功能，如点击关闭按钮时关闭弹出层。下面...
1. **CSS布局**: 这些源码实例展示了如何利用CSS来实现响应式设计，使网页在不同设备上都有良好的显示效果。CSS布局技术包括流体布局、网格系统、Flexbox和Grid布局，其中Flexbox适用于一维布局，Grid则更适合二维...
利用div+css制作弹出层并遮罩层，主用用了两个div，一个div用于弹出框，另一个则遮罩整个页面
在网页设计中，"DIV始终居中的半透明弹出层"是一种常见的用户界面元素，用于显示重要的信息或者交互，如提示、警告、登录框等。本文将深入探讨如何实现这样的功能，包括HTML结构、CSS样式以及可能涉及的JavaScript...
这里的`rgba()`函数用于设置带有透明度的颜色，其中最后的参数代表透明度，0.5表示50%的透明度，黑色背景因此呈现出半透明效果。 二、Lightbox图片展示 在Lightbox效果中，图片通常会以某种动画效果显示。这里提到...
HTML+CSS+Div 学习实例...在本教程中，你将通过一系列实例学习如何利用HTML+CSS+Div 设计出美观、实用的网页。这些实例涵盖了基础布局、响应式设计、动画效果等多个方面，帮助你从新手进阶到熟练掌握这三项核心技术。
在网页设计和开发中，"div+css+js 实现透明屏蔽当前页面，并弹出新层进行操作" 是一种常见的交互设计技术，用于提供更好的用户体验。这种方法通常用于创建模态对话框、提示框或者加载遮罩层，让用户专注于当前的任务...
在网页设计中，"div+css 弹出层"是一种常见的交互效果，它允许用户点击某个元素后，弹出一个浮动窗口展示更多的信息或者进行特定的操作。这种效果广泛应用于登录注册、消息提示、模态对话框、下拉菜单等场景。下面...
在这个“DIV弹出层+定位”的例子中，我们关注的是如何利用`DIV`来创建一个可滑动的弹出层，并且使其在页面上保持固定的位置。这种功能通常用于显示提示信息、模态对话框或者加载额外的内容。 首先，`DIV弹出层`是指...
纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。
本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，能够改变样式并弹出一个相关信息的`div`层。 首先，我们需要创建两个`div`元素：一个作为主内容区域，另一个作为弹出层。在...
### JavaScript与HTML5结合实现半透明遮罩层弹框效果详解 #### 一、引言 在现代网页设计中，半透明遮罩层弹框效果是一种非常常见的交互方式，它不仅可以提升用户体验，还能让页面更加美观。通过JavaScript与HTML5的...
在网页设计中，有时我们需要实现一个效果：让`div`元素的背景图片具有透明度，但其中的文字保持不透明。这个需求可以通过CSS样式来实现。本文将详细解释如何使用CSS来设置`div`的背景图片透明度，同时保持文字的可见...
这一技术结合了HTML的`<div>`元素、CSS样式以及JavaScript/jQuery的动态效果，以实现具有半透明遮罩层的弹出层效果。下面将详细讲解这个知识点。 1. **HTML `<div>`元素**： `<div>`是HTML中的一个块级元素，用于...
本示例主要探讨如何利用jQuery和CSS3技术来实现灵活且具有动画效果的弹出层。下面将详细阐述实现这个功能的关键知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务。...
在网页设计领域，CSS（Cascading Style Sheets）与HTML的结合使用，特别是与`div`元素一起，已经成为创建响应式、...通过阅读教程中的示例，结合实际操作，相信你能在十天内掌握`div+css`的使用，实现Web标准化布局。