JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法。分享给大家供大家参考。具体分析如下:
在众多的网站都有这样的效果,当进行一定的操作之后,会弹出一个灰黑色的半透明的遮罩,在上面可以操作指定的内容,例如可以弹出一个登陆框之类的内容,下面就介绍一下如何实现此种效果,代码实例如下:
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="//www.jb51.net/" />
<title>CSS如何实现弹出一个全屏灰黑色透明遮罩效果-脚本之家</title>
<style type="text/css">
*
{
margin:0px;
padding:0px;
}
.zhezhao
{
width:100%;
height:100%;
background-color:#000;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
position:absolute;
left:0px;
top:0px;
display:none;
z-index:1000;
}
.login
{
width:280px;
height:180px;
position:absolute;
top:200px;
left:50%;
background-color:#000;
margin-left:-140px;
display:none;
z-index:1500;
}
.content
{
margin-top:50px;
color:red;
line-height:200px;
height:200px;
text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function()
{
var zhezhao=document.getElementById("zhezhao");
var login=document.getElementById("login");
var bt=document.getElementById("bt");
var btclose=document.getElementById("btclose");
bt.onclick=function()
{
zhezhao.style.display="block";
login.style.display="block";
}
btclose.onclick=function()
{
zhezhao.style.display="none";
login.style.display="none";
}
}
</script>
</head>
<body>
<div class="zhezhao" id="zhezhao"></div>
<div class="login" id="login"><button id="btclose">点击关闭</button></div>
<div class="content">脚本之家欢迎您,<button id="bt">点击弹出遮罩</button></div>
</body>
</html>
以上实现了基本的遮罩功能,当点击弹出遮罩,会弹出一个对象,当点击关闭,遮罩效果消失。下面介绍一下如何实现次效果:
实现原理:
创建一个满屏的div,使用绝对定位,这样的话它就可以脱离文档流,对其他的元素不会产生影响,并且将其设置为半透明状态,当然这个透明度可以随便调的,同时创建一个login元素,它也使用绝对定位,并将其z-index属性值大于面屏的div,这个时候它就不会被满屏div遮盖。在默认状态下这两个div的display属性值是none。当点击相应的按钮可以更改他们的display属性值。
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
希望本文所述对大家的web程序设计有所帮助。
转载自:https://m.jb51.net/article/58740.htm
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法的更多相关文章
- 页面弹出全屏浮层或遮罩时,禁止底层body滚动
· 解决方法 针对弹出的浮层的 touchmove事件,添加阻止浏览器默认行为. $('.mask-wrapper').on('touchmove', function (event) { // 监听 ...
- jquery3和layui冲突导,致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
项目中使用的jquery版本是jquery-3.2.1,在使用layui弹出全屏iframe窗口时,iframe窗口顶部总是出现一个152px高的滚动窗口无法实现真正全屏,代码如下: <!DOC ...
- layer设置弹出全屏
//弹出即全屏 var index = layer.open({ type: , content: 'http://www.layui.com', area: ['300px', '195px'], ...
- DIV JS CSS 轻量级弹出层 兼容各浏览器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于animate.css动画库的全屏滚动小插件,适用于vue.js(移动端、pc)项目
功能简介 基于animate.css动画库的全屏滚动,适用于vue.js(移动端.pc)项目. 安装 npm install vue-animate-fullpage --save 使用 main.j ...
- FullPage.js全屏插件文档及使用方法
简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持 ...
- FullPage.js全屏滚动插件的配置项、方法和回调函数
fullPage.js 是一个基于 jQuery 的插件,它能够很方便.很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机.平板触摸事件 支持 CSS3 ...
- 原生Js封装的弹出框-弹出窗口-页面居中-多状态可选
原生Js封装的弹出框-弹出窗口-页面居中-多状态可选 实现了一下功能: 1.title可自定义 可拖拽 2.width height可以自定义 3.背景遮罩和透明度可以自定义 4.可以自己编辑弹出 ...
- js进阶 11-20 弹出层如何制作
js进阶 11-20 弹出层如何制作 一.总结 一句话总结:其实就是一个div,控制显示和隐藏即可.设置成绝对定位更好,就可以控制弹出层出现的位置.关闭的画质需要将display重新设置为none就好 ...
随机推荐
- 逆向-攻防世界-logmein
iDA载入程序,shift+F12查看关键字符串,找到双击来到所在地址,进入函数 然后进入主函数, 经过分析,可以得出:输入的字符要等于 经过处理的v7和v8的异或.v8很明显,但是v7是怎么回事呢 ...
- DC/OS安装
dc/os: https://dcos.io/ 安装文档-docker:https://docs.mesosphere.com/1.11/installing/oss/custom/system-re ...
- https 自签名SSL证书
介绍 TLS或称传输层安全性,及其前身SSL(代表安全套接字层)是用于将正常流量包装在受保护的加密包装中的Web协议. 使用这种技术,服务器可以在服务器和客户端之间安全地发送流量,而不会被外部各方拦截 ...
- 解决CentOS6.5下MySQL5.6无法远程连接的问题
在CentOS6.5上安装了Mysql5.6,,本地服务启动成功,但是远程使用Navicat无法远程连接到MySQL数据库,为了解决这个问题,方法如下: (1)先将MySQL服务停掉# service ...
- zookeeper集群的简单搭建
zookeeper简单介绍 zookeeper是一个为分布式应用提供一致性服务的软件,它是开源的Hadoop项目的一个子项目,并根据google发表的一篇论文来实现的.zookeeper为分布式系统提 ...
- Auto Layout Masonry
1. Auto layout 1.1 NSLayoutConstraint 1.1.1 约束类 ios6.0可用 为了更好的适配各个尺寸 1.1.2 constraintWithItem:attrib ...
- Windows Subsystem for Linux 环境变量
WSL(Windows Subsystem for Linux )的环境变量是包含Linux子系统和Windows系统的,测试如下: wy@WY-PC:/mnt/c/Windows/System32$ ...
- git只追踪特定类型的文件
比如我只关心所有office文档并排除掉~开头的辅助文件: * !*/ !*.docx !*.doc !*.xlsx ~*
- 【dp】P2642 双子序列最大和
题目描述 给定一个长度为n的整数序列,要求从中选出两个连续子序列,使得这两个连续子序列的序列和之和最大,最终只需输出最大和.一个连续子序列的和为该子序列中所有数之和.每个连续子序列的最小长度为1,并且 ...
- Codeforces 1108E2 Array and Segments (Hard version)(差分+思维)
题目链接:Array and Segments (Hard version) 题意:给定一个长度为n的序列,m个区间,从m个区间内选择一些区间内的数都减一,使得整个序列的最大值减最小值最大. 题解:利 ...