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

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 <title>web设计大本营</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:99;

 width: 300px;

 height: 120px;

 left:50%;/*FF IE7*/

 top:50%;/*FF IE7*/ 

 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 {

 background-color: #666;

 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，this line code is extremely important*/

 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*/ 

 }

 -->

 </style>

 <script language="javascript" type="text/javascript">

 function showDiv(){

 　　document.getElementById('popDiv').style.display='block';

 　　document.getElementById('bg').style.display='block';

 } 

 function closeDiv(){

 　　document.getElementById('popDiv').style.display='none';

 　　document.getElementById('bg').style.display='none';

 } 

 </script>

 </head>

 <body> 

 <div id="popDiv" class="mydiv" style="display:none;">网页设计大本营欢迎你！<br/>Q群号:26868887<br/>

 <a href="javascript:closeDiv()">关闭窗口</a>

 </div> 

 <div id="bg" class="bg" style="display:none;">5555555555</div>

 <div>

    <pre>      春江花月夜

         唐 张若虚 

     春江潮水连海平，海上明月共潮生。 

     滟滟随波千万里，何处春江无月明？

     </pre>

 <p><br /> 

 </p>

 <div style="height:200px; line-height:200px; text-align:center; background:#FFFFCC;"><a href="javascript:showDiv()">点我,弹出层</a></div> 

 </body>

 </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. 【转】MSMQ消息队列安装

    一.Windows 7安装.管理消息队列1.安装消息队列   执行用户必须要有本地 Administrators 组中的成员身份,或等效身份.   具体步骤:    开始—>控制面板—>程 ...

  2. php页面输出时，js设置input框的选中值

    /* 设置表单的值 */ function setValue(name, value) { var first = name.substr(0, 1), input, i = 0, val; if ( ...

  3. 一、MyBatis简介与配置MyBatis+Spring+MySql

    //备注:该博客引自:http://limingnihao.iteye.com/blog/106076 1.1MyBatis简介 MyBatis 是一个可以自定义SQL.存储过程和高级映射的持久层框架 ...

  4. JSON-RPC轻量级远程调用协议介绍及使用

    这个项目能够帮助开发人员利用Java编程语言轻松实现JSON-RPC远程调用.jsonrpc4j使用Jackson类库实现Java对象与JSON对象之间的相互转换.jsonrpc4j包含一个JSON- ...

  5. css设置height 100%

    需要显式设置html,body为100%,body是相对于html,wrapper是相对于body html,body{ height: 100%; } .wrapper{ height: 100; ...

  6. ASP.NET版CKEditor与CKFinder的配置使用

    ASP.NET版 CKEditor与CKFinder的配置使用 将CKEditor 与 CKFinder 的包含在项目中,并添加程序集的引用 从http://cksource.com网站上下载CKEd ...

  7. Android 在外部存储读写文件

    本文主要介绍android中如何在外部存储读写数据 sd卡的路径 sdcard:2.3之前的sd卡路径 mnt/sdcard:4.3之前的sd卡路径 storage/sdcard:4.3之后的sd卡路 ...

  8. 协议（Protocol）---实例

    协议:声明一些必须实现的方法和选择实现的方法,用来声明一些方法,即一个Protocol是由一系列的方法声明组成的. 建立协议文件步骤:将鼠标放到文件列表处,利用快捷键 command +N 健,得到如 ...

  9. apache-virtual host

    NameVirtualHost xxx.xxx.xxx.xxx:80<VirtualHost xxx.xxx.xxx.xxx:80>        ServerName xxx.xxx.x ...

  10. OC登陆界面登陆按钮动画

    1.原作者:@entotsu 1.1 原作者连接:https://github.com/entotsu/TKSubmitTransition 2.使用: import "HyTransiti ...