<!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. SPOJ AMR10I Dividing Stones --DFS

    题意:给n个石头,分成一些部分(最多n部分,随便分),问分完后每部分的数量的乘积有多少种情况. 分析:可以看出,其实每个乘积都可以分解为素数的乘积,比如乘积为4,虽然可以分解为4*1,但是更可以分解为 ...

  2. Mango DS Traning #49 ---线段树3 解题手记

    Training address: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=38994#overview B.Xenia and B ...

  3. npm install时报错 npm ERR！Windows_NT 6.1.7601

    解决办法:先设置代理为空 npm config set proxy null, 然后再npm install cnpm -g --registry=https://registry.npm.taoba ...

  4. Linux 安装oracle客户端

    环境: CentOS release 6.4 (Final) 一.下载文件 1.首先要查看oracle版本,对应的SQL如下:  select * from V$version ; 2.根据oracl ...

  5. 支持MVC的代码生成运行效果 C# ASP.NET

    做技术的,你若还不懂MVC的话,你好像是外星球来的一样,或者还生活在远古社会里一样,这几天正好没什么事情干,可以静心学习学习MVC技术,顺便把原先的代码生成器修改了一下,只要数据库里设计好了数据结构, ...

  6. C语言 共用体

    //共用体 union #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib.h> #includ ...

  7. 简谈Java的join()方法

    join()是Thread类的一个方法.根据jdk文档的定义: public final void join()throws InterruptedException: Waits for this ...

  8. Android tab导航的几种方法:ActionBar tab +fragment,Viewpager+pagerTitleStrip,开源框架ViewPageIndicator 和 ViewPager

    action来实现tab标签 并跟fragment结合 因为要写新闻客户端这个tab导航是必须的 这里我写几个小练习,希望大家融会贯通. 1actionbar设置tab +fragment 布局是个l ...

  9. html：关于表单功能的学习

    比如我在某jsp页面中写了如下表单: <form action="/MavenWeb/TestFormPost" method="get">   & ...

  10. git的简介，安装以及使用

    1git的简介 Git是什么? Git是目前世界上最先进的分布式版本控制系统(没有之一). Git有什么特点?简单来说就是:高端大气上档次! 2Linus一直痛恨的CVS及SVN都是集中式的版本控制系 ...