`
反求诸己
  • 浏览: 543243 次
  • 性别: Icon_minigender_1
  • 来自: 湖南娄底
社区版块
存档分类
最新评论

Div+CSS实现始终居中的半透明弹出层

 
阅读更多

<!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=gb2312" />
<title>Div+CSS实现始终居中的半透明弹出层</title>
<style type="text/css">
<!--
html,body {height:100%; margin:0px; font-size:12px;}
.mydiv {
background-color: #FFCC66;
border: 1px solid #f00;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:999;
width: 300px;
height: 120px;
left:50%;
top:50%;
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/* FF IE7*/
position:absolute;/*IE6*/
_top:       expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg,.popIframe {
background-color: #666; display:none;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top:       expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);
}
.popIframe {
filter:alpha(opacity=0);/*IE*/
opacity:0;/*FF*/
}
-->
</style>
<script language="javascript" type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('popIframe').style.display='block';
document.getElementById('bg').style.display='block';
}
function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
document.getElementById('popIframe').style.display='none';
}
</script>
</head>
<body>
<div id="popDiv" class="mydiv" style="display:none;">烈火学院欢迎你！请记住我们的网址：http://www.veryhuo.com
<br><a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>
<a href="javascript:showDiv()">点击这里弹出层</a>
<iframe id='popIframe' class='popIframe' frameborder='0' ></iframe>
</body>
</html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>

分享到：
| java中的io系统总结（转）
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js+CSS实现弹出居中背景半透明div层的方法.docx

    JS+CSS 实现弹出居中背景半透明 div 层的方法 在 Web 开发中，弹出居中背景半透明 div 层是一种常见的交互效果，通过 JavaScript 和 CSS，我们可以轻松实现这种效果。在本文中，我们将详细介绍如何使用 JS+CSS 实现...

    DIV始终居中的半透明弹出层.rar

    在网页设计中，"DIV始终居中的半透明弹出层"是一个常见的需求，它涉及到CSS布局、定位以及透明度设置等多个技术点。下面将详细解释这些知识点。 首先，`DIV`是HTML中的一个块级元素，常用于创建网页布局结构。在本...

    DIV始终居中的半透明弹出层

    在网页设计中，"DIV始终居中的半透明弹出层"是一种常见的用户界面元素，用于显示重要的信息或者交互，如提示、警告、登录框等。本文将深入探讨如何实现这样的功能，包括HTML结构、CSS样式以及可能涉及的JavaScript...

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    JS+CSS 实现遮罩居中弹出层（随浏览器窗口滚动条滚动） 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层，并且随浏览器窗口滚动条滚动。该弹出层能够在浏览器窗口中居中显示，且随着浏览器窗口的滚动而滚动。 ...

    div+css登陆页面

    在用户触发某个事件（如点击按钮）时，一个小窗口（可能是一个新的div或者模态对话框）会从页面某个位置滑出，同时，整个页面的背景会逐渐变暗，形成半透明的效果，以突出显示弹出的内容。 实现这个效果有多种方式...

    js+CSS实现弹出居中背景半透明div层的方法

    总结来说，实现js+CSS弹出居中背景半透明div层的方法主要包括以下步骤： 1. 创建两个div，一个作为背景层，一个作为弹出层。 2. 使用CSS定义div的样式，包括尺寸、位置和透明度。 3. 使用JavaScript编写打开和关闭弹...

    js+div+css超酷多种弹出层 兼容各大浏览器

    - 对于 IE 浏览器，使用 `filter: alpha(opacity=20)` 实现半透明效果。 - 非 IE 浏览器，则使用标准 CSS 属性 `-moz-opacity: 0.2; opacity: 0.2;`。 - **iframe 兼容性处理**： - 在 IE 浏览器中，使用 iframe ...

    css 半透明全屏蒙层 全屏屏蔽 内容绝对居中

    在网页设计中，创建一个半透明的全屏蒙层并实现内容绝对居中是一项常见的需求。这主要用于在页面上提供一种交互式的体验，比如显示加载动画、弹出对话框或者遮罩其他元素。下面我们将详细讲解如何使用CSS来实现这个...

    JS+CSS实现带关闭按钮DIV弹出窗口的方法.docx

    `#ly`是用来创建一个半透明的背景层，起到遮罩效果，而`#Layer2`则是弹出窗口本身，包含了一个关闭按钮。 `#ly`的CSS设置如下： - `position: absolute;` 使元素相对于最近的非静态定位祖先元素定位。 - `top: 0px;...

    DIV+CSS网页布局技巧实例

    为了实现某些视觉效果，如半透明的图层，可以利用CSS的透明度属性。 ##### 代码示例 ```css #transparent-layer { filter: alpha(opacity=70); /* IE 5-7 */ opacity: 0.7; /* IE 8+ 及其他现代浏览器 */ } ``` ...

    JavaScript+css+div实现的网页气球提示

    在网页设计中，创建动态和吸引人的用户交互是至关重要的，而"JavaScript+CSS+div实现的网页气球提示"就是一个实现这种交互的例子。这个技术主要用于在网页上以气球形状的提示框显示信息，为用户提供清晰的指引或通知...

    div模拟弹出层

    在网页设计和开发中，"div模拟弹出层"是一种常见的交互设计技术，它允许开发者在用户与页面交互时提供额外的信息或者功能。通常，弹出层是通过JavaScript（JS）来实现的，以模拟像alert这样的系统级对话框，但更加...

    mvc5jquery弹出层居中并显示遮罩

    在本项目"Mvc5jQuery弹出层居中并显示遮罩"中，开发者利用Microsoft的ASP.NET MVC5框架和jQuery库，实现了弹出窗口的居中显示以及半透明遮罩效果，提升了用户界面的美观度和易用性。 首先，我们来了解一下MVC5框架...

    CSS+DIV弹出居中层同时背景变灰色半透明源码

    CSS+DIV弹出居中层同时背景变灰色半透明源码

    JQuery&CSS;&CSS;+DIV实例大全.rar

    一款支持拖拽的jQuery层弹出窗口(TipsWindown1.0版本)下载 10.分享一款jquery Ajax弹出对话框插件SimpleModal 11.下载jQuery对话框Dialog弹出层插件演示与使用说明 12.实用jQuery漂亮浮动层插件,精美Dialog...

    div弹出层

    当触发特定事件（如点击按钮）时，这个`&lt;div&gt;`元素会从页面背景中“弹出”，吸引用户的注意力，而其他内容则被暂时遮盖或半透明化，以突出显示弹出层信息。 二、实现div弹出层的方式 实现div弹出层主要分为以下步骤...

    JS+CSS实现感应鼠标渐变显示DIV层的方法.docx

    最后，文章提到了一些其他与JavaScript和CSS结合实现的DIV层动态效果，如弹出居中、背景半透明、拖拽、排序等，这些都是提高网页交互性的常见技巧。 总之，通过JS和CSS的协同工作，我们可以创建出丰富的用户界面...

    div背景半透明，覆盖整个可视区域的遮罩层效果

    1 、半透明效果可以使用 css3 中的 opacity 属性，在低版本的IE浏览器中使用IE的alpha 滤镜。代码: .opacity{ opacity:0.3; filter: alpha(opacity=30); background-color:#000; } 2 、要覆盖整个可视区域通常的...

    模态成html+CSS实现.rar

    3. 模态背景层（可选）：一个半透明的`&lt;div&gt;`元素，覆盖整个页面，阻止用户与背景交互，通常设置为`position:fixed`和`z-index`小于模态层。 CSS部分则主要负责样式设置，包括： 1. 模态层的定位：使用`position:...

    CSS+JS 蒙板居中技术，居中技术，使用JS获取div的宽度高度？

    至于“蒙版居中”，通常是指在页面上创建一个半透明的遮罩层，然后让内容在其上居中显示。这在弹窗、加载提示等场景中很常见。你可以创建一个全屏的蒙版元素，然后将需要居中的内容作为一个子元素，应用上述的CSS...

Magicbox
Global site tag (gtag.js) - Google Analytics