求实现百度知道页面点登陆后出现背景灰色阴影后还能看到被覆盖的页面解决思路
日期：2014-05-16 浏览次数：20493 次
求实现百度知道页面点登陆后出现背景灰色阴影后还能看到被覆盖的页面
要求在css和js下解决不知有没可能??
------解决方案--------------------
方法一
使用
opacity
filter
确实有遮罩的效果，即 页面的button click不能触发
产生的问题是， 遮罩层上的文字也会产生透明的效果
要求在css和js下解决不知有没可能??
- HTML code
<!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="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
body{
margin: 0px;
padding: 0px;
}
#box{
margin-top: 500px;
margin-left: 200px;
}
#top{
margin-top: 100px;
margin-left: 300px;
}
#bottom{
margin-top: 1240px;
margin-left: 300px;
}
#sig{
height: 20px;
width: 90px;
margin-left: 100px;
margin-top: 100px;
background-color: #0066FF;
font-weight: bold;
color: #FFFFFF;
}
#ajax{
background-color: #CCCCCC;
position: absolute;
z-index: 9999;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
}
</style>
</head>
<body>
<div onclick="ec()" id="sig">点击注册</div>
<div id="top">
求这能看到(要求灰色背景在的前提下)
</div>
<div id="box">
求这能看到(要求灰色背景在的前提下)
</div>
<div id="bottom">
求这也能看到
</div>
</body>
<script>
function $(x){ return document.getElementById(x);}
function ec() {
if($('ajax')){
$('ajax').parentNode.removeChild($('ajax'));
}
var div = document.createElement("div")
div.setAttribute("id", "ajax");
div.style.height =document.body.clientHeight+"px"; //定位
div.style.width =document.body.clientWidth+"px";
document.body.appendChild(div);
$('ajax').innerHTML="<b>aaaaaaaaaaaaaaaa </b>"
}
</script>
</html>
------解决方案--------------------
方法一
使用
opacity
filter
确实有遮罩的效果，即 页面的button click不能触发
产生的问题是， 遮罩层上的文字也会产生透明的效果
- CSS code
#ajax{
background-color: #CCCCCC;
position: absolute;
z-index: 9999;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
opacity:.4;
filter:alpha(opacity=40);
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
