1.  <html xmlns="http://www.w3.org/1999/xhtml">
  2.  <head>
  3.  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4.  <title>web设计大本营</title>
  5.  <style type="text/css">
  6.  <!--
  7.  html,body {height:100%; margin:0px; font-size:12px;} 
  8.  
  9.  .mydiv {
  10.  background-color: #FFCC66;
  11.  border: 1px solid #f00;
  12.  text-align: center;
  13.  line-height: 40px;
  14.  font-size: 12px;
  15.  font-weight: bold;
  16.  z-index:99;
  17.  width: 300px;
  18.  height: 120px;
  19.  left:50%;/*FF IE7*/
  20.  top:50%;/*FF IE7*/ 
  21.  
  22.  margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
  23.  margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/ 
  24.  
  25.  margin-top:0px; 
  26.  
  27.  position:fixed!important;/*FF IE7*/
  28.  position:absolute;/*IE6*/ 
  29.  
  30.  _top:       expression(eval(document.compatMode &&
  31.              document.compatMode=='CSS1Compat') ?
  32.              documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
  33.              document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 
  34.  
  35.  }
  36.  .bg {
  37.  background-color: #666;
  38.  width: 100%;
  39.  height: 100%;
  40.  left:0;
  41.  top:0;/*FF IE7*/
  42.  filter:alpha(opacity=50);/*IE*/ /*点击后背景透明效果*/
  43.  opacity:0.5;/*FF*/
  44.  z-index:1; 
  45.  
  46.  position:fixed!important;/*FF IE7，this line code is extremely important*/
  47.  position:absolute;/*IE6*/ 
  48.  
  49.  _top:       expression(eval(document.compatMode &&
  50.              document.compatMode=='CSS1Compat') ?
  51.              documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
  52.              document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/ 
  53.  
  54.  }
  55.  -->
  56.  </style>
  57.  <script language="javascript" type="text/javascript">
  58.  function showDiv(){
  59.  　　document.getElementById('popDiv').style.display='block';
  60.  　　document.getElementById('bg').style.display='block';
  61.  } 
  62.  
  63.  function closeDiv(){
  64.  　　document.getElementById('popDiv').style.display='none';
  65.  　　document.getElementById('bg').style.display='none';
  66.  } 
  67.  
  68.  </script>
  69.  </head>
  70.  <body> 
  71.  
  72.  <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你！<br/>Q群号:26868887<br/>
  73.  <a href="javascript:closeDiv()">关闭窗口</a>
  74.  </div> 
  75.  
  76.  <div id="bg" class="bg" style="display:none;">5555555555</div>
  77.  <div>
  78.     <pre>      春江花月夜
  79.          唐 张若虚 
  80.  
  81.      春江潮水连海平，海上明月共潮生。 
  82.  
  83.      滟滟随波千万里，何处春江无月明？
  84.      </pre>
  85.  <p><br /> 
  86.  
  87.  </p>
  88.  <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div> 
  89.  
  90.  </body>
  91.  </html>

html弹窗半透明的更多相关文章

  1. 兼容谷歌、火狐、IE7.0以上浏览器div+css实现的带有蒙版的半透明弹窗效果[xyytit]

    整个页面变暗的蒙版效果,带有半透明边框的弹窗,用在网站里一定很酷. 最初见与奢饰品购物网站YMALL,后边研究了下,自己做了这个实例. 技术要点:css中几种透明样式的使用.不同的样式在不同的浏览器中 ...

  2. Android PopupWindow 弹窗背景半透明，设置最大高度

    首先讲一个网上的方法: popupwindow弹出后,屏幕背景变成半透明这个效果很普通.实现的方法也很多.我使用的可能是最简单的一种,就是设置一下getWindows的透明度. /** * 设置添加屏 ...

  3. android 半透明弹窗

    <style name="edit_AlertDialog_style" parent="@android:style/Theme.Dialog"> ...

  4. 四种常见的App弹窗设计,你有仔细注意观察吗?

    弹窗又称为对话框,是App与用户进行交互的常见方式之一.弹窗分为模态弹窗和非模态弹窗两种,两者的区别在于需不需要用户对其进行回应.模态弹窗会打断用户的正常操作,要求用户必须对其进行回应,否则不能继续其 ...

  5. IE8-下背景色半透明滤镜在jquery动画中失效问题记录

    前两天,UIer跟我说,把这些按钮都悬浮在这个图片上!我心中千万头草泥马奔过,图片各种各样.花花绿绿.五颜六色的,这几个按钮也没有多大的光环围绕,用户一眼看上去恐怕会以为这是图片的一部分吧!~~~我假 ...

  6. js弹窗登录效果(源码)--web前端

    1.JS弹窗登录效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. 苹果手机对网页上样式为position:fixed的弹窗支持不好的解决办法

    在Web页面上,如果想模拟对话框效果,一般会给div元素添加position:fixed的样式来实现,然后给背景添加一个半透明的遮罩.如: .fixedDiv { position: fixed; t ...

  8. cocos creator主程入门教程（二）—— 弹窗管理

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以TypeScript为介绍语言. 我们已经知道怎样制作.加载.显示界面.但cocos没有提供一个弹窗管理模块,对于一个多人合作的项目,没有 ...

  9. jQuery插件编写基础之“又见弹窗”

    本文将通过一个实例来引出jQuery插件开发中的一些细节,首先介绍下jQuery插件开发的一些基础知识. jQuery的插件开发主要分为两类: 1. 类级别,即在jQuery类本身上扩展方法,类似与 ...

随机推荐

  1. 循序渐进开发WinForm项目（2)--项目代码的分析

    随笔背景:在很多时候,很多入门不久的朋友都会问我:我是从其他语言转到C#开发的,有没有一些基础性的资料给我们学习学习呢,你的框架感觉一下太大了,希望有个循序渐进的教程或者视频来学习就好了. 其实也许我 ...

  2. C# Web Forms - Using jQuery FullCalendar

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  3. mysql学习笔记 第七天

    数据库的备份与还原 数据库的备份与还原是后面章节的内容,但是在学习的时候已经需要数据的备份与还原了,所以就了解了一下.数据库有很多种备份方法,我学习的是其中的一种 备份: 对于数据库的备份: C:&g ...

  4. 我的Machine Learning学习之路

    从2016年年初,开始用python写一个简单的爬虫,帮我收集一些数据. 6月份,开始学习Machine Learning的相关知识. 9月开始学习Spark和Scala. 现在想,整理一下思路. 先 ...

  5. PHP学习笔记：万能随机字符串生成函数（已经封装好）

    做验证码用到的,然后就把这个函数封装起来,使用时候要设置2个参数: $str设置里要被采集的字符串,比如: $str='efasfgzsrhftjxjxjhsrth'; 则在函数里面生成的字符串就回从 ...

  6. Hibernate框架之关联映射入门

    关联映射就是将关联关系映射到数据库里,在对象模型中就是一个或多个引用. 一:配置单向多对一关联 在Emp类中定义一个Dept属性,而在Dept类中无须定义用于存放Emp对象的集合属性 01.Dept. ...

  7. mysql创建数据库指定编码

    GBK: create database test2 DEFAULT CHARACTER SET gbk COLLATE gbk_chinese_ci; UTF8: CREATE DATABASE ` ...

  8. web安全——系统(Linux)

    简介 最小(少)原则,是安全的重要原则.最小的权限,最小的用户,最少的服务,最少的进程,是最安全的. 系统安全包括:文件系统保护.用户管理安全.进程的保护以及日志的管理. 场景 确保服务最少,每个都是 ...

  9. 2015年第14本（英文第10本）：The A.B.C. Murders (A.B.C谋杀案)

    书名:The ABC Murders 推荐指数:5星 作者:Agatha Christie 单词数:7万 不重复单词数:不详 首万词不重复单词数:不详 蓝思值:740 阅读时间:2015年7月18日 ...

  10. IOS 开发一些常用的地址

    1.开发者中心 https://developer.apple.com/membercenter/index.action 2.itunesconnect https://itunesconnect. ...