JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
本文实例讲述了js+CSS实现弹出一个全屏灰黑色透明遮罩效果的方法。分享给大家供大家参考。具体分析如下：
在众多的网站都有这样的效果，当进行一定的操作之后，会弹出一个灰黑色的半透明的遮罩，在上面可以操作指定的内容，例如可以弹出一个登陆框之类的内容，下面就介绍一下如何实现此种效果，代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://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程序设计有所帮助。
相关推荐
-
js实现鼠标移动到图片产生遮罩效果
本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mask</title> <style> .pic{ width:300px; height:250px; background:url(icon/pro
-
html 锁定页面(js遮罩层弹出div效果)
复制代码 代码如下: <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>UntitledDocument</title> <script> function createIf
-
javascript div 遮罩层封锁整个页面
具体解决方案如下: 一.IE和FF下document.body对象的clientHeight,offsetHeight,scrollHeight属性的差别. clientHeight 在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度. offsetHeight 在IE下,offsetHeight也是浏览器可视区域的高(包括边线) 在FF下,offsetHeight是页面具体内容的高度 scrollHeight 在IE下,scroll
-
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 复制代码 代码如下: <!doctype html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{}{margin:0;padding:0;} html{}{_background:url(about:blank);} /**//*
-
js弹出div并显示遮罩层
复制代码 代码如下: //--------------------弹出层------------------- //popDivId:弹出层div的ID //dragDivId:用于拖动div的ID //isShowMask:是否显示遮罩层 function popDivShow(popDivId, dragDivId, isShowMask) { if (isShowMask) { creatMask(popDivId); } var oWins = document.getElementBy
-
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
这两天要用到正好练练手,比想象中碰到的问题要多,比如: ie6背景透明 ie6居中显示 还有对js对象的理解 openID=显示按钮,conID=需要显示的div,closeID=关闭按钮 解决了: 1.可以遮挡ie6下的select元素 但是在ie6下div没有透明度 2.弹出的div可以一直在浏览器屏幕中间显示 问题: 1.目前不支持.class 只支持#id 2.需要显示的div需要自己设置css 3.在ie6下需要设置css 例如div {_position: absolute;_top
-
原生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
-
利用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> <title></titl
-
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点击按钮实现带遮罩层的弹出视频效果
本文实例讲解了js点击按钮实现带遮罩层的弹出视频效果,涉及到css以及JavaScript,分享给大家供大家参考,具体内容如下 最终显示效果:点击红色按钮,会有视屏弹出 并带有遮罩层 点击黄色区域可以关闭视频 并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置有id值. <div class="main"> <a href="javascript:;" class="video" id="