遮罩层的实现(纯js兼容版)
这个代码是我以前测试时候的代码了，主要用到的知识点是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兼容版)的更多相关文章
- js实现页面遮罩层，并且阻止页面body滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6
阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...
- 纯js制作遮罩层对话框 -- g皓皓
//本文支持js在线工具测试.转载请注明出处. <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> < ...
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...
- js简单弹出层、遮罩层
<html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果【转】
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 ...
- 纯CSS3写的10个不同的酷炫图片遮罩层效果
这个是纯CSS3实现的的10个不同的酷炫图片遮罩层效果,可以欣赏一下 在线预览 下载地址 实例代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- JS+CSS简单实现DIV遮罩层显示隐藏【转藏】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js添加遮罩层
直接用代码来说明 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MaskT ...
随机推荐
- [python][flask][flask-SQLAlchemy]关于flask-SQLAlchemy的初级使用教程
鉴于网上关于flask-SQLAlchemy的实例使用教程参差不齐,于此写下工作学习过程中的使用过程,以便分享交流. 对于python关于flask有一定了解的高端玩家来说,请转至flask官方开发文 ...
- Lucene4.9学习笔记——Lucene建立索引
基本上创建索引需要三个步骤: 1.创建索引库IndexWriter对象 2.根据文件创建文档Document 3.向索引库中写入文档内容 这其中主要涉及到了IndexWriter(索引的核心组件,用于 ...
- NET Portability Analyzer
NET Portability Analyzer 分析迁移dotnet core 大多数开发人员更喜欢一次性编写好业务逻辑代码,以后再重用这些代码.与构建不同的应用以面向多个平台相比,这种方法更加容易 ...
- 解决在HTTPS页面里嵌套HTTP页面浏览器block的问题
问题描述: 浏览器默认是不允许在HTTPS里面引用HTTP页面的,ie下面会弹出提示框提示是否显示不安全的内容,一般都会弹出提示框,用户确认后才会继续加载,但是chrome下面直接被block掉,只在 ...
- 安装ECMall后报PHP Strict Standards错误，请问如何解决
Strict Standards: Non-static method ECMall::startup() should not be called statically in /htdocs/ecm ...
- 使用 .NET 平台，如何玩转 Universal Windows 应用？
2015年7月30日 本文作者是 Managed Languages 团队项目经理 Lucian Wischik. 不久前,Visual Studio 2015上新增 Windows 10 应用的开发 ...
- 系统的了解DJANGO中数据MODULES的相关性引用
数据库结构如下: from django.db import models class Blog(models.Model): name = models.CharField(max_length=1 ...
- 今天，安装了一个GANGLIA玩玩，以后再测试NAGIOS吧。
说不定以后派得上用场呢.. 还有,NGINX也要学,不能老是凭站IIS,APACHE混饭吃吧,现在它都这么流行了..新浪,网易,腾讯.
- 李洪强iOS开发Swift篇—02_变量和常量
李洪强iOS开发Swift篇—02_变量和常量 一.语言的性能 (1)根据WWDC的展示 在进行复杂对象排序时Objective-C的性能是Python的2.8倍,Swift的性能是Python的3. ...
- 一个简单的DDraw应用程序
阅读排行榜 1. C/C++ 笔试.面试题目大汇总(72915) 2. [STL]list基础(21718) 3. COM笔记-CoCreateInstance(14842) 4. C/C++ ...