<!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;">

        aaaaaaaaa <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>

Html-Css-div透明层剧中的更多相关文章

  1. CSS + DIV 让页脚始终底部

    一 前言 经常设计页面时用到三层DIV,头DIV与脚DIV一般固定高度,而中间层DIV根据内容的多少,高度不定,我们经常希望但内容很少时,脚DIV保持在底部,当内容很多时,脚DIV被中间内容挤到下面, ...

  2. HTML CSS + DIV实现整体布局

    HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒子模型 实现DIV+CSS整体布局 2.什么是W3C标准? W3C:World Wide Web Con ...

  3. CSS+DIV两栏式全屏布局

    在网上找了很久,发现大部分都是固定宽度设置两栏,全屏情况下的布局很少.最后终于完成了,写出来备查,也供大家参考. <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. CSS + DIV 让页脚始终保持在页面底部

    来源:David's Blog     http://www.DavidQiu.com/ 文章链接:http://blog.davidqiu.com/post/2013-06-17/400517539 ...

  5. div垂直居中 css div盒子上下垂直居中

    div垂直居中 css div盒子上下垂直居中,让DIV盒子在任何浏览器中任何分辨率的显示屏浏览器中处于水平居中和上下垂直居中. div垂直居中常用于单个盒子,如一个页面里只有一个登录布局,使用div ...

  6. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  7. CSS+DIV常用命名

    常用的符合CSS+DIV规则的命名 页头:header 登录条:loginBar 标志:logo 侧栏:sideBar 广告:banner 导航:nav 子导航:subNav 菜单:menu 子菜单: ...

  8. 基于CSS+dIV的网页层，点击后隐藏或显示

    一个基于CSS+dIV的网页层,用JavaScript结合Input按钮进行控制,点击后显示或隐藏,网页上常用到的特效之一,实用性较强,相信对大家的前端设计有帮助. <!DOCTYPE html ...

  9. 系列文章--精通CSS.DIV网页样式与布局学习

    精通CSS.DIV网页样式与布局(八)——滤镜的使用 精通CSS.DIV网页样式与布局(七)——制作实用菜单 精通CSS.DIV网页样式与布局(六)——页面和浏览器元素 精通CSS.DIV网页样式与布 ...

  10. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

随机推荐

  1. HDU 1698 & UESTC 1228 Just a hook

    算是线段树中的一道水题了,必须用到懒操作,否则会超时.或者也可以刚开始不计算和,只更新节点,最后算整个线段的颜色和. 1.懒操作法 /* 908ms 3448KB in HDU OJ*/ #inclu ...

  2. [3D跑酷] GUIManager UI管理

    UI元素更新及界面跳转 继上篇日志<Unity开发之 GUIClickEventReceiver>,再谈一下我们如何管理游戏中的UI元素更新及界面跳转 UI绑定 图一:Inspector面 ...

  3. Android 三种动画详解

    [工匠若水 http://blog.csdn.net/yanbober 转载请注明出处.点我开始Android技术交流] 1 背景 不能只分析源码呀,分析的同时也要整理归纳基础知识,刚好有人微博私信让 ...

  4. ASP.NET 里的 JSON操作

    最近项目中需要用到 JSON操作,google了一下 找到了几个比较好的操作方法.... 一 .使用 mircosoft 提供的 .NET Framework 自带的 json操作方法 1. 使用Ja ...

  5. iOS获取窗口当前显示的控制器

    解决类似网易新闻客户端收到新闻推送后,弹出一个UIAlert,然后跳转到新闻详情页面这种需求 1.提供一个UIView的分类方法,这个方法通过响应者链条获取view所在的控制器 - (UIViewCo ...

  6. 1445 送Q币

    1445 送Q币  时间限制: 1 s  空间限制: 1000 KB  题目等级 : 钻石 Diamond 题解  查看运行结果     题目描述 Description 一次在玩网络游戏的过程中,在 ...

  7. 006医疗项目-模块一：用户的查找：2.用户表查询的mapper映射的文件

    前一篇文章已经把sql语句写好了并且在PL/SQL上调试过了,是可以的.这篇文章是写对应的mapper.xml, 第一步我们先通过逆向工程去构建每个表的mapper.xml文件和pojo类.这个我们在 ...

  8. 【转】【C#】判断两个文件是否相同

    使用System.security.Cryptography.HashAlgorithm类为每个文件生成一个哈希码,然后比较两个哈希码是否相同 该哈希算法为一个文件生成一个小的二进制“指纹”,从统计学 ...

  9. U3D5.3.5f Monodevelop 仅支持到.NET 3.5

    2016年12月2号:发现这个标题是错误的,可以在monodevelop中选择.NET的版本,如下:打开solution,右击 Assembly-CSharp,options, build, gene ...

  10. The ServiceClass object does not implement the required method in the following form: OMElement sayHello(OMElement e)

    今天遇到一件诡异的事情,打好的同一个aar包,丢到测试环境tomcat,使用soapui测试,正常反馈结果. 丢到本地tomcat,使用soapui测试,始终报以下错误. <soapenv:En ...