JS实现遮罩层效果的简单实例
function show(){
var cover = document.getElementById("cover");
cover.style.width = document.documentElement.scrollWidth+"px";
cover.style.height = document.documentElement.scrollHeight+"px";
cover.style.display = "block";
}
#cover{
background:gray;
position:absolute;
left:0px;
top:0px;
display:none;
z-index:20;
filter:alpha(opacity=60);
opacity:0.6 !important;
}
相关推荐
-
JS遮罩层效果 兼容ie firefox jQuery遮罩层
复制代码 代码如下: <!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=&qu
-
纯js实现遮罩层效果原理分析
可以说这个功能,在我理解了前面的"贪吃蛇"之后,实在是与刚开始想象的难度差了好多,当然是这种方式有取巧之嫌,终归是实现了功能,我们来进行分析整理 1.实现原理 本片文章的 是实现原理如下: * 实际上弹出层.遮罩层和原页面显示分别为三个不同的div * 弹出层的层级在遮罩层之上,遮罩层的层级在原页面显示之上: * 遮罩层有通明效果 * 遮罩层没有实际意义,则无需在html部分就写上,当然写上同样可以实现 2.代码实现 html语言如下: 复制代码 代码如下: <html>
-
原生js实现半透明遮罩层效果具体代码
复制代码 代码如下: <!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=&qu
-
通过遮罩层实现浮层DIV登录的js代码
这个就没什么好说的了..直接上代码啊!! 首先是HTML的代码.其中包含了登录点击按钮以及一个简陋的登录框. 复制代码 代码如下: <body> <div id="shade"></div> <div> <a onclick="login()" style="cursor:pointer">登录</a> </div> <br/> 什么都没有用...&l
-
javascript div 遮罩层封锁整个页面
具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll
-
弹出最简单的模式化遮罩层的js代码
假设我们有一个容器container如下: 复制代码 代码如下: <style type="text/css"> #container{width:auto;height:auto; overflow:hidden;} /*这里的overflow:hidden;属性主要是为了设置使超出container的部分自动隐藏,之所以设置这个属性,是为了解决ie8及以下版本浏览器兼容性问题*/ </style> <div id="container&quo
-
js点击按钮实现带遮罩层的弹出视频效果
本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="
-
js弹出div并显示遮罩层
复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy
-
js鼠标悬浮出现遮罩层的方法
本文实例讲述了js鼠标悬浮出现遮罩层的方法.分享给大家供大家参考.具体实现方法如下: html页面代码: 复制代码 代码如下: <ul class="site-tag fl"> <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa60002008
-
JS简单实现点击按钮或文字显示遮罩层的方法
本文实例讲述了JS简单实现点击按钮或文字显示遮罩层的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>点击文字弹出一个DIV层窗口代码</title> <meta charset="urf-8"/> &l
-
js实现遮罩层弹出框的方法
本文实例讲述了js实现遮罩层弹出框的方法.分享给大家供大家参考.具体分析如下: 昨天公司网站需要弹窗提示一些信息,要我在把弹窗的js代码和弹窗窗口html写在一起哪里需要就调用 不说那么多了,直接上代码,感觉肯定会有兼容问题,看到了请指出啊: 复制代码 代码如下: <style> #H-dialog{display:none;position:absolute;z-index: 9999999;width:400px;height: auto; background-color: #f
-
css+js实现部分区域高亮可编辑遮罩层
想大家都做过遮罩层这种常见的功能,css或jquery实现,实现方式多样化,这里http://我介绍我在项目中实现的方式,全屏遮罩,部分区域可操作,非常实用. 效果如下图: js 实现部分: 复制代码 代码如下: <script type="text/javascript"> var myAlert = document.getElementById("alert"); var reg = document.getElementById("c
随机推荐
- Javascript基础_嵌入图像的简单实现
- phpPgAdmin 配置文件参数说明中文版
- 使用Http通道突破防火墙限制
- 解析Java中如何获取Spring中配置的bean
- 5分钟内了解C语言的指针
- ThinkPHP CURD方法之where方法详解
- DWZ+ThinkPHP开发时遇到的问题分析
- 深入理解Python装饰器
- 详细分析Android中实现Zygote的源码
- 修改mysql5.5默认编码(图文步骤修改为utf-8编码)
- 脚本和web页共用同一个文件测试
- Java实力弹弹球实现代码
- JavaScript下拉菜单功能实例代码
- JS实现网页顶部向下滑出的全国城市切换导航效果
- Win 2003下如何配置及共享打印
- win2008 IIS7无后缀URL部署问题 MVC4 MVC URL映射
- C#实现下拉框绑定list集合的方法
- 基于C#方法重载的总结详解
- 详解Python中 sys.argv[]的用法简明解释
- VB FileSystemObject对象实例详解