这个代码是我以前测试时候的代码了，主要用到的知识点是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. 【HDU4333】Revolving Digits（扩展KMP+KMP）

    Revolving Digits   Description One day Silence is interested in revolving the digits of a positive i ...

  2. Eclipse can't install updates

    trying to update eclipse but after downloading updates i always get an error dialog saying: An error ...

  3. leetcode面试准备:Divide Two Integers

    leetcode面试准备:Divide Two Integers 1 题目 Divide two integers without using multiplication, division and ...

  4. 深入详解SQL中的Null

    深入详解SQL中的Null NULL 在计算机和编程世界中表示的是未知,不确定.虽然中文翻译为 “空”, 但此空(null)非彼空(empty). Null表示的是一种未知状态,未来状态,比如小明兜里 ...

  5. 《Gulp 入门指南》 ： 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  6. Chrome浏览器插件VisualEvent，可以方便的查看页面绑定的事件

    http://files.cnblogs.com/files/jiqing9006/VisualEvent.zip

  7. Codevs_1230_元素查找_(set/Hash)

    描述 http://codevs.cn/problem/1230/ ... 1230 元素查找 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond       题目 ...

  8. 用sql语句写排名

    使用SQL语句求排名 表jh03有下列数据: name score aa 99 bb 56 cc 56 dd 77 ee 78 ff 76 gg 78 ff 50 1. 名次生成方式1 , Score ...

  9. The server is temporarily unable to service your request due to maintenance downtime or capacity problems. Please try again later.

    The server is temporarily unable to service your request due to maintenance downtime or capacity pro ...

  10. [转]笔记本Ubuntu系统关闭独显+省电降温设置

    [转载者按]最近装了Ubuntu 13.04 64 bits版操作系统玩玩,但是发现两个显卡都开着,所以上网查找资料,以在不需要3D的时候关闭Nvidia显卡.通过Bumblebee软件包可以达到这一 ...