<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. sphinx配置文件sphinx.conf参数详细说明

    sphinx配置文件sphinx.conf参数详细说明 sphinx.conf各个参数详细说明 # # Sphinx configuration file sample # # WARNING! Wh ...

  2. python之import机制

    1. 标准 import        Python 中所有加载到内存的模块都放在 sys.modules .当 import 一个模块时首先会在这个列表中查找是否已经加载了此模块,如果加载了则只是将 ...

  3. [moka同学笔记]yii2.0的下拉菜单与bootstrap下拉菜单

    1.yii2下拉菜单 <li class="dropdown"><a href="#" class="dropdown-toggle ...

  4. sqlite3之基本操作（一）

    简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库管理系统,它的设计目标是嵌入式的,而且目前已经 ...

  5. CentOS修改服务器系统时间

    linux安装完毕后,一般都是国外的世界,一点都不方便设置任务,或者导致网站获取本地的时间错乱,所以就需要把服务器的时间改为和本地时间一致,也就是换成中国的时间. 第一条指令:date –s '201 ...

  6. RCA端子颜色（红、白、黄）

    RCA端子(红白黄)的作用: 黄:视频 红:左声道 白:右声道 RCA为两口插头,红色代表左声道,白色为右声道,3.5(AUX口)同样为立体声接头,虽然它只有一个端口,同样也具有左右声道分开传输的功能 ...

  7. AngularJS directive 指令相关记录

    .... .directive('scopeDemo',function(){ return{ template: "<div class='panel-body'>Name: ...

  8. andriod RadioButton

    <?xml version="1.0" encoding="UTF-8"?> <LinearLayout android:orientatio ...

  9. R语言学习笔记：小试R环境

    买了三本R语言的书,同时使用来学习R语言,粗略翻下来感觉第一本最好: <R语言编程艺术>The Art of R Programming <R语言初学者使用>A Beginne ...

  10. SharedPreference.Editor的apply和commit方法异同

    这两个方法的区别在于: 1. apply没有返回值而commit返回boolean表明修改是否提交成功 2. apply是将修改数据原子提交到内存, 而后异步真正提交到硬件磁盘, 而commit是同步 ...