<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. PHP框架中最喜欢的WindFramework

    题外话, 像我这样从小到大作文打0分居多的人,写文章,实在是没有耐心的,抱歉. 尽管自己也山寨过许多PHP框架,但被山寨的对象中,最喜欢的是WindFramework. Yii其实更好,但太大而全. ...

  2. ASP.NET Web API涉及到的上下文

    1.表示请求的上下文:HttpRequestContext; 2.表示HttpController:HttpControllerContext; 3.表示Action方法:HttpActionCont ...

  3. jquery TypeError: 'undefined' is not a function (evaluating 'elem.nodeName.toLowerCase()') [jquery.js:1904]错误原因

    今天,某个环境报了个js错误,TypeError: 'undefined' is not a function (evaluating 'elem.nodeName.toLowerCase()') [ ...

  4. [Azure] Notification Hubs注册模式

    [Azure] Notification Hubs注册模式 关于Azure Notification Hubs的注册模式,可以参考下列连结的文件内容. Notification Hubs Featur ...

  5. [原创]html5游戏_五线谱打音符

    html5手机游戏—五线谱打音符 1.[用五线谱打唱名] 2.[用唱名打五线谱] 3.[无限练习模式] 用来熟悉五线谱上音符的位置 代码不难,这回注释还是有认真写的[只是废代码没有全部删除...] 效 ...

  6. jQuery对复选框（checkbox)的全选，全不选，反选等的操作

    效果截图: HTML代码: <body><ul id="list"> <li><label><input type=" ...

  7. javascript --- Ajax基础

    神马是Ajax? Ajax即‘Asynchronous javascript and XML’(异步javascript和XML),也就是所谓的无刷新页面读取技术. http请求 首先要了解http请 ...

  8. 如何通过PowerShell在Visual Studio的Post-build中预热SharePoint站点

    问题现象 Visual Studio在开发SharePoint的时候,发布部署包后,首次打开及调试站点页面的时候会非常的慢 解决方案 使用PowerShell脚本,加载SharePoint插件后遍历所 ...

  9. all things are difficult before they are easy

    刚开始接触一项新知识时,总是感觉很难,只要你用心钻研下去,它会慢慢变简单的.

  10. Android源码分析之MessageQueue

    下面让我们花些时间来看看MessageQueue的具体实现,不过在分析代码之前让我们来理解下在类开头的一大段comments. MessageQueue是比较低层的类,是持有Message(在Loop ...