position实现分层和遮罩层功能
很多网站,当点了一个按钮后,弹出一个窗口,底层变透明不可选,就是用到层的概念,至少三层
第一层,底层原始层
第二层,遮罩层,用到positon: fixed; top bottom left right 全为0;再加一个透明度opacity: 0.5;
第三层,弹出层,
当然这几层得有个顺序,z-index 数字越大越在顶层。最后就是用js实现display为none;
<body>
<div style="position: fixed;top: 50%;left: 50%;margin-top: -150px;margin-left: -250px; z-index: 10;width: 500px;height: 300px;background-color: gold;"></div>
<div style="position: fixed;z-index: 9;top: 0;bottom:0;left: 0;right: 0;background: #000;opacity: 0.5;"></div>
<div style="width: 100%;height: 2000px;background-color: #4affe5; border: 1px solid #ff0f1e; margin: 0 auto;"></div> </body>
position实现分层和遮罩层功能的更多相关文章
- jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
本文实例讲述了jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能.分享给大家供大家参考,具体如下: 弹出层:两种方式 一是打开网页就自动弹出层二是点击弹出 <!DOCTYPE html ...
- Angularjs 实现页面遮罩层功能
实现效果: 1.loading指令: "use strict" /** * Created by yw on 2015/9/27. * user defined loading d ...
- 自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6
阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...
- 弹出页面遮罩层,以及web端和移动端阻止遮罩层的滑动。
最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:a ...
- html实现弹框,并伴随遮罩层,且弹框居中
本文介绍的内容主要实现的功能有,出现弹框,并且伴随遮罩层,且弹框一直居中. html和js代码: <div id="hidebg"></div> <d ...
- jQuery+CSS 简单代码实现遮罩层( 兼容主流浏览器 )
/* ** jQuery版本:jQuery-1.8.3.min.js ** 浏览器:Chrome( v31.0.1650.63 m ),IE11,Firefox( v32.0.1 ),IETester ...
- vue实现一个移动端屏蔽滑动的遮罩层
在扯废话浪费大家的时间之前,先上个代码好了,使用vue实现起来很简单-- <div class="overlayer" @touchmove.stop > </d ...
- java javaScript实现遮罩层 动态加载
通过java.JavaScript和css实现点击按钮后出现灰色遮罩层,并显示动态加载的字样,提高用户体验,废话不多说,上代码(写这个博客的原因是网上代码太多新手根本不知道哪里对哪里,这里剔除所有无关 ...
- jQuery遮罩层插件
在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...
随机推荐
- FZU 1759-Super A^B mod C
传送门:http://acm.fzu.edu.cn/problem.php?pid=1759 Accept: 1161 Submit: 3892Time Limit: 1000 mSec ...
- EPOCH, BATCH, INTERATION
CIFAR10 数据集有 50000 张训练图片,10000 张测试图片.现在选择 Batch Size = 256 对模型进行训练. 每个 Epoch 要训练的图片数量: 训练集具有的 Batch ...
- transition的用法以及animation的用法
http://www.cnblogs.com/xiaohuochai/p/5347930.html transiton: 过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间: 触发过渡 单纯的代码不 ...
- Codeforces483B. Friends and Presents(二分+容斥原理)
题目链接:传送门 题目: B. Friends and Presents time limit per test second memory limit per test megabytes inpu ...
- day 019 常用模块
主要内容: 1模块的简单认识 2collection模块 3time时间模块 4random模块 5os模块 6sys模块 一 模块的简单认识 引入模块的方式: 1import (常见方式) 2 ...
- PTA——判断胖瘦
PTA 7-40 到底是不是太胖了 #include<stdio.h> #include<math.h> int main() { ,N; scanf("%d&quo ...
- vue的指令绑定、事件、冒泡
a标签的属性绑定: v-once:就是第一次渲染什么就是什么,不会随着其他改变而改变,简言之就是绑定他不让他的值改变 防止跨站脚本攻击 如果你觉得安全的话,可以不要让变量的值显示成字符串 解决方法是: ...
- Python--异常处理和断言
try关键字,定义获取程序错误 except关键字,出现异常错误执行里面的代码 Exception定义错误类,Exception能获取到所有类型的错误错误,as创建错误对象名称,自动获取错误信息 #! ...
- 【BZOJ1030】【JSOI2007】文本生成器
我现在连AC自动姬都不会,怎么办嘛QAQ 原题: JSOI交给队员ZYX一个任务,编制一个称之为“文本生成器”的电脑软件:该软件的使用者是一些低幼人群,他们现在使用的是GW文本生成器v6版.该软件可以 ...
- linux网络编程概念(一)
AF表示地址族(address family) PF表示协议族(protocol family) domain参数 AF_UNIX 内核中通信 sockaddr_un AF_INET 通过ipv4 s ...