文档章节

遮罩层整理

秦学强
 秦学强
发布于 2017/07/09 22:04
字数 119
阅读 4
收藏 0

css部分:

#bg{ display: none;  position: absolute;  top: 0%;  left: 0%;  
		width: 100%;  height: 100%;  background-color: black;  z-index:1001; 
		-moz-opacity: 0.7;  opacity:.70;  filter: alpha(opacity=70);}
	#show{display: none;  position: absolute;  top: 25%;  left: 22%;  
	   	width: 680px;  height: 380px;  padding: 8px;  border: 8px solid #E8E9F7;  
	   	background-color: white;  z-index:1002;  overflow: auto;}

js部分:

//遮罩层
		function showdiv() {   
			document.getElementById("bg").style.display ="block";
            document.getElementById("show").style.display ="block";
			//$("#bg").css("display","block");
			//$("#show").css("display","block");
        }
		function hidediv() {
			document.getElementById("bg").style.display ='none';
            document.getElementById("show").style.display ='none';
			//$("#bg").css("display","none");
			//$("#show").css("display","none");
        }


html部分:

<!-- 遮罩层 -->
	 <div id="bg"></div>
	 <div id="show" class="alert alert-success" role="alert">

	 </div>



本文转载自:http://blog.csdn.net/u014481096/article/details/45502943

共有 人打赏支持
秦学强

秦学强

粉丝 0
博文 69
码字总数 0
作品 0
海淀
程序员
jQuery实现带遮罩层的消息框滑入滑出效果

首先,使用一个遮罩层来遮住整个页面,在遮罩层上显示一个消息框,消息框还可以被关闭,最后使用jQuery使得消息框从页面顶部滑下,实现的效果如下: 遮罩层的样式如下: 样式说明了不论在哪种...

罗盛力
2012/02/17
0
1
实现新手引导简单遮罩(无需shader)

效果如下: 大部分教程都有shader实现遮罩,shader可以控制更好效果的遮罩。unity自带的功能也能实现简单的新手引导遮罩,只是unity自带的遮罩会有锯齿。之后再更新加shader的版本。 以下是具...

lisa0626
04/25
0
0
JS实现遮罩层

用JS实现一个常见的遮罩层,该遮罩层包含三部分(触发按钮,透明遮罩层,弹出对话层),并分解各部分(分为HTML,CSS,JavaScript),逐一讲解实现的机理。最终效果如下图: HTML结构 一个用来触...

MangoGan
2017/11/24
0
0
【功能】遮罩层实现

遮罩层固定于窗口中央,不会随滚动条滑动。 遮罩层实现: <style type="text/css">/遮罩层 CSS/ #close{ text-shadow: 0 1px 0 #fff; opacity: .2; filter: alpha(opacity=20); width:30px; ......

霞女
2016/01/12
15
0
小程序 textarea组件层级过高导致文字穿透浮层的一个解决方法

最近做的一个小程序需求,其中一个页面使用到了 这个小程序组件,然后点击页面上的某个元素,会触发页面弹起一个弹窗,这时发现 的 文字或者输入的文字内容,会直接穿透遮罩层和浮动弹窗,显...

清夜
08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
44分钟前
0
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
3
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
2
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
3
0
中秋快乐!!!

HiBlock
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部