<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. 重构第26天 移除双重否定(Remove Double Negative)

    理解:”移除双重否定”是指把代码中的双重否定语句修改成简单的肯定语句,这样即让代码可读,同时也给维护带来了方便. 详解:避免双重否定重构本身非常容易实现,但我们却在太多的代码中见过因为双重否定降低了代 ...

  2. PUT 还是 POST ?

    http://www.oschina.net/translate/put-or-post http://my.oschina.net/u/1263964/blog/268932 这两个方法咋一看都可以 ...

  3. ArrayList集合

    //在使用ArrayList时别忘了引用命名空间 using System.Collections;//首先得导入命名空间 //01.添加方法 add方法 //告诉内存,我要存储内容 ArrayLis ...

  4. ASP.NET WebAPI 11 参数验证

    在绑定完Action的所有参数后,WebAPI并不会马上执行该方法,而要对参数进行验证,以保证输入的合法性. ModelState 在ApiController中一个ModelState属性用来获取参 ...

  5. html alert 的三种方式

    html alert 一共有三种方式. 第一种是最简单的直接在js的函数里alert("要输出的内容"); 这种直接就是一个弹出框,显示要输出的内容. 第二种是带选择的弹出框,弹出 ...

  6. 为七牛云存储开发的PHP PEAR 包：Services_Qiniu

    七牛云存储Qiniu Resource (Cloud) Storage:用于存储图片.apk等静态资源. 优点: 1.使用七牛带宽和CDN,速度快,不占用开发者服务器. 2.支持图片任意格式.任意分辨 ...

  7. HTML5离线缓存Manifest

    web app不比PC,有性能和流量方面的考虑,离线应用越来越重要,虽然浏览器有缓存机制,但是时常不靠谱,更何况普通情况下html文件是没法缓存的,断网之后一切over. 什么是manifest? 简 ...

  8. AloneJs.confirmbox() —— 确认框

    一.引用 <link href="https://cdn.suziyun.com/alonejs.min.css" rel="stylesheet" /& ...

  9. 本地Git服务器的搭建及使用

    本地Git服务器的搭建及使用 Git本地服务器环境搭建 搭建好的本地git服务器的局域网ip是192.168.1.188,用户名是RSCSVN 教程链接:http://blog.csdn.net/cc ...

  10. ArcEngine中License权限等级更改的问题

    曾经认为自己对于ArcGIS 开发许可问题比较理解了,并小结在<ArcEngine10.x开发的许可问题>中. 01.权限问题 今天在调用GP时失败(插值式开发,使用的是他人框架),因为需 ...