这个代码是我以前测试时候的代码了，主要用到的知识点是opacity和filer分别实现

“标准浏览器”和IE浏览器下的半透明，使用js的document.body.offsetwidth

和screen.height来控制遮罩层的宽高，通过element.style.display属性来控制

遮罩层显示与否
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head>

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

<title>HTML遮罩层，背景半透明，只显示中间部分</title>

<style>

#msgDiv {

    z-index:10001;

    width:500px;

    height:400px;

    background:white;

    border:#336699 1px solid;

    position:absolute;

    left:50%;

    top:20%;

    font-size:12px;

    margin-left:-225px;

    display: none;

}

#bgDiv {

    display: none;

    position: absolute;

    top: 0px;

    left: 0px;

    right:0px;

    background-color: #777;

    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);

    opacity: 0.6;

}

</style>

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

function showDetail(){//show detail

	//msgDiv

	var msgDiv = document.getElementById("msgDiv");

	msgDiv.style.marginTop = -75 + document.documentElement.scrollTop + "px";

	//bgDiv

	var bgDiv = document.getElementById("bgDiv");

	bgDiv.style.width = document.body.offsetwidth + "px";

	bgDiv.style.height = screen.height + "px";

	//msgShut

	var msgShut = document.getElementById("msgShut");

	msgShut.onclick = function(){

		bgDiv.style.display = msgDiv.style.display = "none";

	}

	//content

	msgDiv.style.display = bgDiv.style.display = "block";

	var msgDetail = document.getElementById("msgDetail");

	msgDetail.innerHTML = "<p style='line-height:50px;font-size:30px;text-align:center'>显示框中的内容</p>";

}

</script>

</head>

<body>

<div id="msgDiv">

	<div id="msgShut">关闭</div>

    <div id="msgDetail"></div>

</div>

<div id="bgDiv"></div>

<p></p>

<p><a href="#" onClick="showDetail()">点击我看看</a></p>

</body>

</html>

本文出自 WEB前端开发-SEO-SEM | 朱宝祥的博客，转载时请注明出处及相应链接。

本文永久链接: http://qitiancom.com/archives/959

遮罩层的实现(纯js兼容版)的更多相关文章

  1. js实现页面遮罩层，并且阻止页面body滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

  3. 纯js制作遮罩层对话框 -- g皓皓

    //本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...

  4. jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )

    /* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...

  5. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  6. 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...

  7. 纯CSS3写的10个不同的酷炫图片遮罩层效果

    这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. JS+CSS简单实现DIV遮罩层显示隐藏【转藏】

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. js添加遮罩层

    直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...

随机推荐

  1. c# 如何通过反射 获取\设置属性值、

    //定义类public class MyClass{public int Property1 { get; set; }}static void Main(){MyClass tmp_Class = ...

  2. Http 状态码详解

    状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必须在 ...

  3. 用19种编程语言写Hello World

    用19种编程语言写Hello World 转载自:http://www.admin10000.com/document/394.html Hello World 程序是每一种编程语言最基本的程序,通常 ...

  4. mysql数据库中某项其中一个值在该项排第几,百分几

    SQL 如下: sql 1. SELECT X.USER_ID, X.TOTAL_NO, X.ORDER_NO, X.ORDER_NO / X.TOTAL_NO AS PERCENTAGE_NO AS ...

  5. SPRING IN ACTION 第4版笔记-第三章ADVANCING WIRING-004-消除bean自动装配的歧义@Primary

    一. 假设有如下三个类实现同一个接口,则自动装配时会产生歧义 @Component public class Cake implements Dessert { ... } @Component pu ...

  6. sqlite的源代码加密，以及其它一些文章

    一.       给数据库加密 前面所说的内容网上已经有很多资料,虽然比较零散,但是花点时间也还是可以找到的.现在要说的这个——数据库加密,资料就很难找.也可能是我操作水平不够,找不到对应资料.但不管 ...

  7. MFC程序的启动过程——先全局对象theApp（第一入口），后WinMain（真正入口），会引爆pApp->InitInstance从而创建窗口（程序员入口）

    原文出自:http://blog.csdn.net/yuvmen/article/details/5877271 了解MFC程序的启动过程,对于初学者来讲,了学习MFC很有帮助:对于不常用VC的人来说 ...

  8. eclipse环境NDK问题汇总

    1. 配置NDK路径设置 可以在cygwin中通过vim修改,也可以在windows安装目录中修改 home\<你的用户名>\.bash_profile 文件中最后添加环境变量 NDK=/ ...

  9. HDOJ/HDU 2352 Verdis Quo(罗马数字与10进制数的转换)

    Problem Description The Romans used letters from their Latin alphabet to represent each of the seven ...

  10. [SAM4N学习笔记]按键程序(查询方式)

    一.准备工作:      将上一节搭建的工程复制一份,命名为"5.key scanf".这一节主要讲如何使用SAM4N的GPIO输入功能,实现按键的输入. 二.程序编写:      ...