文档章节

遮罩层整理

秦学强
 秦学强
发布于 2017/07/09 22:04
字数 119
阅读 4
收藏 0
点赞 0
评论 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
关于jquery实现遮罩层

请高手帮忙:jquery实现遮罩层,功能是当用户不点击关闭遮罩层的按钮不能进行其他操作,我是用了overlay属性,设置为true,但是这样的话遮罩层周围都是灰色的了,我只是希望它周围不是灰色,...

嘣猪嗤痴
2013/08/28
403
5
鼠标移入移出效果 -- jQuery/Vue版

元素内遮罩层根据鼠标方向显示的效果比较常见,比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...

bestvist
06/22
0
0
jQuery遮罩层插件--Simple Overlay

Simple Overlay 是一个轻量级的jQuery遮罩层插件,当我们需要遮挡住某个HTML元素或者要吸引用户的注意时就会用到遮罩层。 这是个轻量级并且兼容性强的插件,用到了jQuery的淡入淡出效果来显示...

匿名
2011/12/11
15.6K
0
bootstrap 弹出层怎么添加日期控件啊

bootstrap css 我用它的遮罩层,然后想在遮罩层添加一个时间日期控件。却怎么也没效果

宝石娃娃
2013/08/30
3K
5
VUX v2.1.1-rc.11 发布,基于 WeUI 的 Vue 移动端组件库

该版本主要为交互、动画优化。 demo 预览地址:https://vux.li/demos/v2/ Actionsheet [enhance] 更加流畅的遮罩层动画 Alert [enhance] 作为插件使用时,每次都重置属性值 Confirm [fix] 修...

airyland
2017/03/14
1K
1
这个背景渐变的效果是如何实现 (如何让一个块显示后再transition效果)

问题: 现在做一个遮罩 想让这个遮罩有颜色过渡渐变的效果,遮罩上用了display:none;opacity:0; transition: all 1s ease; 要触发遮罩的按钮事件 $('.overlay').show().css('opacity','1');...

nihaoqkl
2014/05/17
734
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JavaEE——JavaScript

声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 JavaScript 内置对象 String对象方法: date对象...

凯哥学堂
8分钟前
0
0
Git 远程代码回滚master

方式一(推荐): git revert commit-id 方式二(不推荐):不推荐原因:推送到线上后,其它开发人员需要重新clone git reset --hard commit-id git push origin HEAD --force...

浮躁的码农
8分钟前
0
0
Elasticesearch学习(7)—— ES查询与Java API的对应关系

1、普通查询 类型 ES查询语句 Java查询实现 结果 查询格式 { "query": { "bool": { "must": [], "must_not": [], "should": [], "filter": [] } }, "from": 0, "size": 10, "sort": [] } Que......

叶枫啦啦
9分钟前
4
0
getElementsByClassName()与getElementById()区别

1.document.getElementsByClassName() 返回的是数组 使用:document.getElementsByClassName("className")[0].innerText='具体内容' 2.document.getElementById() 返回的是单个元素 使用:d......

botkenni
20分钟前
0
0
MyBatis入门

一、安装 <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>x.x.x</version></dependency> 二、从 XML 中构建 SqlSessionFactory String r......

一个yuanbeth
21分钟前
0
0
聊聊spring cloud的LoadBalancerAutoConfiguration

序 本文主要研究一下spring cloud的LoadBalancerAutoConfiguration RibbonAutoConfiguration spring-cloud-netflix-ribbon-2.0.0.RC2-sources.jar!/org/springframework/cloud/netflix/ribb......

go4it
23分钟前
0
0
【转】使用Lombok来优雅的编码

前言 Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO)。它通过注解实现这一目的。 正文 添加依赖 在 pom.xml 文件中添加相关依赖:...

HAVENT
25分钟前
0
0
Dubbo 源码解读 —— 可支持序列化及自定义扩展

一、概述 从源码中,我们可以看出来。目前,Dubbo 内部提供了 5 种序列化的方式,分别为 fastjson、Hessian2、Kryo、fst 及 Java原生支持的方式 。 针对不同的序列化方式,对比内容如下: 名...

Ryan-瑞恩
33分钟前
0
0
MySQL内存设置—— MySQL server has gone away

set global max_allowed_packet=268435456

一梦心草
42分钟前
0
0
推导式

列表、集合和字典推导式 列表推导式是Python最受喜爱的特性之一。它允许用户方便的从一个集合过滤元素,形成列表,在传递参数的过程中还可以修改元素。形式如下: [expr for val in collect...

火力全開
47分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部